XSL in SharePoint Cheat Sheet

When creating styles in the Content Query Web Part or creating an Item View in SharePoint Designer 2013, you have to get to grips with XSL formatting.

Here are some of the attributes I find myself using regularly while consulting to my Auckland based SharePoint clients​. 

URL or Links

<a>

<xsl:attribute name="href">

<xsl:value-of select="@DispForm"/></xsl:attribute>

<xsl:value-of select="$DisplayTitle"/>

</a>

Or to add a “Read More…” link

<a>

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

read more…

</a>

Dates

To display the date for New Zealand (e.g. 30 March 2016). 

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

Change the '3' in the code below to vary the date format (e.g. ddwrt:FormatDate(@StartDate, 2057, 1) will display 30/03/2016.

Images

To add an image (from your own Picture field – in this case @PostImage)

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

To show nothing if your 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>

To add a 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

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

Set a div depending on output of field.

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

<div class="High">

</div>

</xsl:if>

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

<div class="Low">

</div>

</xsl:if>