​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.

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.

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 produces the following output: