​XSL Styling of List Information

SharePoint allows us to attach our own custom xsl to a list displayed on a SharePoint page. XSL stands for EXtensible Stylesheet Language, it is like a style sheet for XML data, except that unlike CSS we can also include HTML code to structure the layout of the information, and XPath to manipulate the data. This is incredibly useful as it gives us the ability to display list data however we would like.

We'll start with a simple example. Let's say we have a list of the names of fruit and their corresponding colors:

Attach the XSL document to the List Web Part

Once the Fruit list has been added to the page we'll bring up the Edit Web Part menu for the list.

Edit Web Part

In the last tab at the bottom of the menu Miscellaneous is a box called XSL Link. Put the path (URL) to the XSL document in here and click OK.

XSL

Basic XSL Document

The following is the simple XSL document that we're going to apply to our fruit list. The XSL creates an unordered list and then loops through every row in the fruit list and writes out the values for the fruit name and fruit color columns separated by a comma in each list item in our unordered list.

<!--
This section is the set up and can be used at the top of any external XSLT stylesheet file
-->
<xsl:stylesheet
xmlns:x="http://www.w3.org/2001/XMLSchema"
xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
version="1.0"
exclude-result-prefixes="xsl msxsl ddwrt"
xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
xmlns:asp="http://schemas.microsoft.com/ASPNET/20"
xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:ddwrt2="urn:frontpage:internal">
<xsl:output method="html" indent="no"/>
<!--
End of Set Up
-->


<!--
The initial template which in this case is matching everything with "/" It then creates a variable called Rows - this is accessed as $Rows A standard HTML unordered list tag is next followed by a loop through each row of the list and calls our second template dvt1-rowview to display the contents
-->
<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema">
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />

<ul>
<xsl:for-each select="$Rows">
    <xsl:call-template name="dvt_1.rowview" />
</xsl:for-each>
</ul>
</xsl:template>
<!--
End of first template
-->


<!--
Standard HTML li contain the contents of our list xsl:value-of command is used to display our column Columns are accessed as @InternalColumnName
-->
<xsl:template name="dvt_1.rowview">
<li><xsl:value-of select="@Fruit" />, <xsl:value-of select="@Color" /></li>
</xsl:template>
</xsl:stylesheet>

This produces the following output:

  • apple, red
  • grape, purple
  • bananna, yellow
  • blueberries, blue
  • cherries, red
  • pineapple, yellow
  • strawberries, red
  • orange, orange
  • lemon, yellow
  • kiwi, green
  • blackberry, dark purple
  • lime, green
  • coconut, white
  • mango, orange