In SP2010, out-of-the-box list views use the XsltListViewWebPart and this gives you a lot more flexibility in customising the look and feel of your list, for example you can apply Conditional Formatting to your list using SharePoint Designer. In this post I will go through the steps to do just this!

Say I have a list of students and exam marks. I want to create a view that highlights the students that are doing good and those that are not doing so well. The end product could look like the below, with rows highlighted red where the mark is less than or equal 50, yellow when the mark is between 51 and 74, and green when the mark is 75 or more.

Jazzed up list in SP2010 with Conditional Formatting

To start, I create a normal custom list with the columns being Student Name (renamed from Title), Exam Mark (this is the main column that will drive the formatting), and Parent Contact.

I then clone the default All Items view as Highlighted View (so that I have something to go back to if things go really wrong).

Now go to the list using the browser and go to the Highlighted View. On the ribbon, click on the List tab under the List Tools group. Choose to Modify view in SharePoint Designer as shown below:

Choose to modify view in SharePoint Designer

This should launch SharePoint Designer and open up the view in Design mode (by default) as shown below.

The view in Design mode in SharePoint Designer

Click on one of the cell on the view, e.g. the “Mary” cell as shown above. On the ribbon, under the List View Tools group, under the Options tab, click Conditional Formatting button, and click Format Row from the dropdown menu as shown below.

Select Format Row from the Conditional Formatting button

The Condition Criteria dialog box should appear. This is where you specify the condition that a style will be applied to. In the Field Name dropdown box select Exam Mark. In the Comparision dropdown box select Less Than or Equal. In Value type in 50. Your dialog box should look like the below:

Specify the condition that a style will be applied to

Click Set Style in the dialog above. This will bring up the Modify Style dialog which allows you set the style that will be applied for the condition you specified in the last step. Set the background to red as shown below and click OK:

Set background to red

That’s it and you should see the Conditional Formatting reflected in the designer. Repeat these steps and specify additional Conditional Formatting rules for the yellow and green mark ranges. When you are done go ahead and save the view in SharePoint Designer. Go back to your browser and your view will now deliver a truly enhanced user experience!

The next challege is to “export” what we’ve just done and package that into a solution so that it can be deployed across different environments… but that’s for another post on another day :).