Replace Values in a SharePoint list with Graphics

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=”; xmlns:d=”; version=”1.0″ exclude-result-prefixes=”xsl msxsl ddwrt” xmlns:ddwrt=”; xmlns:asp=”; xmlns:__designer=”; xmlns:xsl=”; 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:when test=”$thisNode/@*[name()=current()/@Name] = ‘On Target’”>

                    <img src=”/_layouts/images/IMNON.png” alt=”Results: {$thisNode/@Status}”/>


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

                    <img src=”/_layouts/images/IMNIDLE.png” alt=”Results: {$thisNode/@Results}”/>



                    <img src=”/_layouts/images/IMNBUSY.png” alt=”Results: {$thisNode/@Results}”/>






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.

The result with the XSL formatting looks like this:



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: