Replace Values in a SharePoint list with Graphics

mondizen

May 4, 2012

In SharePoint 2007, if you wanted to show graphic icons in a list on the basis of values, you would have had to insert some JavaScript into a Content Editor Web Part.

In SharePoint 2010, a similar result can be achieved via the use of an XSL formatting file attached to the list. Imagine a list where you have a Results field with the values On Target, Underperforming and Failed. It might be useful to replace those descriptions, managed perhaps through a choice field with traffic light icons. Many graphics exist as standard on each SharePoint server, and these can be reused in custom styled views.

The following example should be saved as an .XSL in a document library on your site, with the name of Results.xsl, for example.

<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” xmlns:o=”urn:schemas-microsoft-com:office:office”>

<xsl:include href=”/_layouts/xsl/main.xsl”/>

<xsl:include href=”/_layouts/xsl/internal.xsl”/>

<xsl:template name=”FieldRef_body.Results” match=”FieldRef[@Name=’Results’]” mode=”body”>

<xsl:param name=”thisNode” select=”.”/>

<xsl:choose>

<xsl:when test=”$thisNode/@*[name()=current()/@Name] = ‘On Target’”>

</xsl:when>

<xsl:when test=”$thisNode/@*[name()=current()/@Name] = ‘Underperforming’”>

</xsl:when>

<xsl:otherwise>

</xsl:otherwise>

</xsl:choose>

</xsl:template>

</xsl:stylesheet>

Create your list with a choice column called Results and allow On Target, Underperforming and Failed as possible options. Then reference the Results.xsl file you saved previously, by putting the URL to the file in XSL Link box.