URL or Links

Basic Link

<a>
<xsl:attribute name="href">
<xsl:value-of select="@DispForm"/>
</xsl:attribute>
<xsl:value-of select="$DisplayTitle"/>
</a>

Read More Link

<a>
<xsl:attribute name="href">
<xsl:value-of select="@DispForm"/>
</xsl:attribute>
read more…
</a>

Dates

New Zealand Date Format (30 March 2016)

Change the '3' to vary date format (e.g., '1' will display 30/03/2016)

<xsl:value-of select="ddwrt:FormatDate(@StartDate, 2057, 3)"/>

Images

Basic Image from Picture Field

<img border="0" src='{@PostImage}' alt='{@PostImage.desc}' title='{@PostImage.desc}'/>

Conditional Image Display

Shows nothing if image field is blank

<xsl:choose>
<xsl:when test="@PostImage != ''">
<img border="0" src='{@PostImage}' alt='{@PostImage.desc}' title='{@PostImage.desc}'/>
</xsl:when>
<xsl:otherwise>
</xsl:otherwise>
</xsl:choose>

PDF Icon

<div class="pdficon">
<a href='{$SafeLinkUrl}' title='{@LinkToolTip}' target="_blank">
<img src="/_layouts/15/images/icpdf.png?rev=36"></img>
</a>
</div>

HTML

Parse Field as HTML

Renders HTML content instead of escaping it

<xsl:value-of select="@Author" disable-output-escaping="yes" />

Conditional Styling

Set div based on field value

Apply different CSS classes based on field values

<xsl:if test="@Urgency = 'High' ">
<div class="High">
</div>
</xsl:if>

<xsl:if test="@Urgency = 'Low' ">
<div class="Low">
</div>
</xsl:if>

Tips and Best Practices

  • •Always test your XSL transformations in a development environment first
  • •Use conditional statements to handle empty fields gracefully
  • •Remember to escape special characters when not using disable-output-escaping
  • •Keep your XSL code organized and well-commented for future maintenance

Need Help with SharePoint XSL Development?

Our SharePoint experts can help you create custom XSL transformations and optimize your Content Query Web Parts for better performance and user experience.