SharePoint 4 Developers

Additional reference guide in .NET / SharePoint Development

Programmatically Setting Conditional Formatting

22. February 2011 Admin Quick Notes, Tips and Tricks (3)
Learn how to how to apply conditional formatting to views manually and programmatically by using SharePoint Designer 2010 and Visual Studio 2010 respectively.

Hi folks,

Today I want to talk about conditional formatting, which allows you to apply HTML styles to views depending on the criteria specified. This is not something new in SharePoint, in MOSS 2007 this already existed.

In this post I am going to demonstrate how to apply conditional formatting manually and programmatically, so stay tuned!

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.

1_680
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:

2_680
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.

3_680
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.

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

5
Figure 5 – Background colour

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

6_680
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:

7_680
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:

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

8_680
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

Cheers,

Marcel Medina

Click here to read the same content in Portuguese.

blog comments powered by Disqus