Styling SharePoint 2010 Lists using XSL

XSL (EXtensible Stylesheet Language) styles the XML output of SharePoint 2010 lists. It allows easy customisation without any server side code.

For example, this is a standard Tasks Web Part.

After having an XSL stylesheet applied, it transforms the way the list is rendered (see below).

In the example below, the template is called for each item depending what the “Status” field contains.

<xsl:for-each select="dsQueryResponse/Rows/Row[contains(@Status, 'In Progress') or contains(@Status, 'Not Started') or contains(@Status, 'Waiting on someone else')]" >
        <xsl:sort select="@Created" order="descending"/>
        <xsl:call-template name="row"/>
      </xsl:for-each>

If the status is “In Progress”, “Not Started” or “Waiting on someone else”, the template named “row” is called. Each item is sorted by the Creation date.

In the row template, the image src attribute (location of traffic light colour image) is selected using an if statement on the status field. For each status a different image is displayed.

<img>
				<xsl:attribute name="src">	
					<xsl:if test="@Status = 'Completed'">
						/Style%20Library/XSLT/green.png
					</xsl:if>
					<xsl:if test="@Status = 'In Progress'">
						Style%20Library/XSLT/amber.png
					</xsl:if>
					<xsl:if test="@Status = 'Not Started'">
						/Style%20Library/XSLT/red.png
					</xsl:if>
					<xsl:if test="@Status = 'Deferred'">
						/Style%20Library/XSLT/grey.png
					</xsl:if>
					<xsl:if test="@Status = 'Waiting on someone else'">
						/Style%20Library/XSLT/grey.png
					</xsl:if>
				</xsl:attribute>
			</img>

The complete code below with some CSS applied generates the customised Tasks list view.

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" >
  <xsl:output method="xml" indent="yes"/>
  <xsl:template match="/">
    <div style="padding: 5px 8px 5px 5px; display:block;">
      <span class="tasksGroups">My Current Tasks:</span>
      <xsl:for-each select="dsQueryResponse/Rows/Row[contains(@Status, 'In Progress') or contains(@Status, 'Not Started') or contains(@Status, 'Waiting on someone else')]" >
        <xsl:sort select="@Created" order="descending"/>
        <xsl:call-template name="row"/>
      </xsl:for-each>
    </div>
    <div style="padding: 0px 8px 0px 0px; display:block;">
     <span class="tasksGroups"> My Completed Tasks:</span>
      <xsl:for-each select="dsQueryResponse/Rows/Row[contains(@Status, 'Deferred') or contains(@Status, 'Completed')]" >
        <xsl:sort select="@Created" order="descending"/>
        <xsl:call-template name="row"/>
      </xsl:for-each>
    </div>


  </xsl:template>
  <xsl:template name="row" match="dsQueryResponse/Rows/Row">
	<div class="TaskBox">
		<div id="infoleft">
			<img>
				<xsl:attribute name="src">	
					<xsl:if test="@Status = 'Completed'">
						/Style%20Library/XSLT/green.png
					</xsl:if>
					<xsl:if test="@Status = 'In Progress'">
						Style%20Library/XSLT/amber.png
					</xsl:if>
					<xsl:if test="@Status = 'Not Started'">
						/Style%20Library/XSLT/red.png
					</xsl:if>
					<xsl:if test="@Status = 'Deferred'">
						/Style%20Library/XSLT/grey.png
					</xsl:if>
					<xsl:if test="@Status = 'Waiting on someone else'">
						/Style%20Library/XSLT/grey.png
					</xsl:if>
				</xsl:attribute>
			</img>
			<xsl:value-of select="@Status" />
		</div>
		<div id="infomiddle">
			<span id="core-tasks-title"><xsl:value-of select="@Title" /></span><br />
			<span id="core-tasks-body"><xsl:value-of select="@Body" disable-output-escaping="yes"/></span><br />
		</div>
		<div id="inforight"><xsl:value-of select="@PercentComplete" />
		</div>
		<br style="clear:both" />
	</div>
  </xsl:template>
</xsl:stylesheet>

Using XSL and CSS provides a large opportunity to customise SharePoint frontend design of lists without any custom solutions or server side code. This technology will become more important as users move to hosted SharePoint solutions like Office 365 with limited access to server side customisation. It also allows for easier upgrades to future versions of SharePoint.