Conditional formatting in SharePoint Designer 2010

Let’s take the Grades list below as an example. Basically the idea is to implement a range of colours against the column Grade that differentiates grades. Based on the grade these colours will vary.

 
Figure 1 – Grades List

By using the SharePoint Designer 2010, this customisation is easy. Go to the Grades list in SharePoint Designer 2010 and open up the view called “All Items”, according to the Figure 2:

 
Figure 2 – All Items view

Interestingly the view can be visualised in both ways (Design and Code), which allows an easy customisation. By following the steps according to the Figure 3 the conditional formatting will be applied against the column Grade.

 
Figure 3 – Conditional Formatting in SharePoint 2010

Immediately after the step 3 above, you need to create a condition criteria that will do the task we need by applying a style in the Grades List.

 
Figure 4 – Condition Criteria

According to the condition criteria above, set the background colour to be Green.

Note: Different colours need to be applied against different condition criteria.

 
Figure 5 – Background colour

After configuring all the condition criteria, the conditional formatting can be visualised in different colours, according to the Figure 6:

 
Figure 6 – Conditional Formatting colours

The conditional formatting bar is very clear, and summarises the criteria you have specified. It allows you to configure the styles at any time. Pretty handy!

In the end you will get your the Grades List set according to the Figure 7:

 
Figure 7 – Conditional Formatting applied to the Grades List

Conditional formatting in Visual Studio 2010

So far you have seen how to set conditional formatting manually. Now you will see how to set this up programmatically!

First of all you need to identify the Xsl section (from Figure 6), copy all the content from this section to a xsl file, according to the code below:

Code Snippet

1. <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">
2.   <xsl:include href="/_layouts/xsl/main.xsl"/>
3.   <xsl:include href="/_layouts/xsl/internal.xsl"/>
4.   <xsl:param name="AllRows" select="/dsQueryResponse/Rows/Row[$EntityName = '' or (position() &gt;= $FirstRow and position() &lt;= $LastRow)]"/>
5.   <xsl:param name="dvt_apos">&apos;</xsl:param>
6.   <xsl:template name="FieldRef_printTableCell_EcbAllowed.Grade"match="FieldRef[@Name='Grade']" mode="printTableCellEcbAllowed" ddwrt:dvt_mode="body"ddwrt:ghost="" xmlns:ddwrt2="urn:frontpage:internal">
7.     <xsl:param name="thisNode" select="."/>
8.     <xsl:param name="class" />
9.     <td>
10.       <xsl:attribute name="style">
11.         <xsl:if test="normalize-space($thisNode/@Grade) = 'A'" ddwrt:cf_explicit="1"xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">background-color: #009900;</xsl:if>
12.         <xsl:if test="normalize-space($thisNode/@Grade) = 'B'" ddwrt:cf_explicit="1"xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">background-color: #66FF33;</xsl:if>
13.         <xsl:if test="normalize-space($thisNode/@Grade) = 'C'" ddwrt:cf_explicit="1"xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">background-color: #FFFF00;</xsl:if>
14.         <xsl:if test="normalize-space($thisNode/@Grade) = 'D'" ddwrt:cf_explicit="1"xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">background-color: #FF9900;</xsl:if>
15.         <xsl:if test="normalize-space($thisNode/@Grade) = 'E'" ddwrt:cf_explicit="1"xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">background-color: #FF0000;</xsl:if>
16.       </xsl:attribute>
17.  
18.       <xsl:if test="@ClassInfo='Menu' or @ListItemMenu='TRUE'">
19.         <xsl:attribute name="height">100%</xsl:attribute>
20.         <xsl:attribute name="onmouseover">OnChildItem(this)</xsl:attribute>
21.       </xsl:if>
22.       <xsl:attribute name="class">
23.         <xsl:call-template name="getTDClassValue">
24.           <xsl:with-param name="class" select="$class" />
25.           <xsl:with-param name="Type" select="@Type"/>
26.           <xsl:with-param name="ClassInfo" select="@ClassInfo"/>
27.         </xsl:call-template>
28.       </xsl:attribute>
29.       <xsl:apply-templates select="." mode="PrintFieldWithECB">
30.         <xsl:with-param name="thisNode" select="$thisNode"/>
31.       </xsl:apply-templates>
32.     </td>
33.   </xsl:template>
34. </xsl:stylesheet>

Note: The SharePoint Designer 2010 created a subsection called xsl:attribute to store the conditional formatting you have specified (Lines 10 to 16).

In this example I am creating a feature that is going to deploy the Grades list. So check the structure of the solution for you to have an idea:

 
Figure 8 – Conditional Formatting solution

Note: The xsl files in SharePoint 2010 must be deployed under the directory Layouts\Xsl.

To deploy the Grades list I have coded the FeatureActivated method (available in the Event Receiver of the feature):

Code Snippet

1. public override void FeatureActivated(SPFeatureReceiverProperties properties)
2. {
3.     SPWeb web = (SPWeb)properties.Feature.Parent;
4.  
5.     string grades = "Grades";
6.  
7.     if (web.Lists.TryGetList(grades) == null)
8.     {
9.         // Creating list
10.         Guid listGuid = web.Lists.Add(grades, "", SPListTemplateType.GenericList);
11.         SPList list = web.Lists[listGuid];
12.         list.OnQuickLaunch = true;
13.  
14.         // Configuring fields
15.         SPField title = list.Fields["Title"];
16.         title.Title = "Name";
17.         title.Update(true);
18.  
19.         list.Fields.Add("Grade", SPFieldType.Text, true);
20.  
21.         // Updating view
22.         SPView mainView = list.Views[0];
23.         mainView.ViewFields.DeleteAll();
24.         mainView.ViewFields.Add("Attachments");
25.         mainView.ViewFields.Add("LinkTitle");
26.         mainView.ViewFields.Add("Grade");
27.         mainView.XslLink = "ConditionalFormattingXsl/grades.xsl";
28.         mainView.Update();
29.  
30.         // Saving changes
31.         list.Update();
32.     }
33. }

Note: Pay attention to the line 27. That’s what I am talking about! Beautiful.

Once you have deployed the solution, activate it and you will get the Grades list created with the Conditional Formatting applied automatically.

 
Figure 9 – Feature created

Download the solution here.

To make things easier, always use SharePoint Designer to set up conditional formatting on your views. Then copy the Xsl section and paste to a xsl file. It does the trick.

I hope it helps.

References: 
http://stefan-stanev-sharepoint-blog.blogspot.com/2010/08/xsltlistviewwebpart-several-xslt-tips.html 
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spview.xsllink.aspx
http://office.microsoft.com/en-us/sharepoint-designer-help/apply-conditional-formatting-to-a-data-view-HA010099624.aspx