Thursday, 8 July 2010

Colour code a RAG column in Sharepoint 2007 list view using Jquery

To see the best selling SMART televisions visit Yngoo!
I'm a big fan of Microsoft Sharepoint, even though it really annoys me sometimes. It's amazing that no matter what question a client asks of it, it never can quite answer the question straight out of the box. However, this is not a problem, because Sharepoint is virtually infinately customisable by a competent programmer with enough time to become emersed in the "Sharepoint Way" and no fear of learning new techniques.
An example of this came up for me recently when a client requested that a column on a list would be colour coded depending on the value of the data in that column. The data would be a RAG rating (i.e. a "choice" field containing a set of values that relate to red, amber or green), and therefore it would be nice to colour code the column in eiter red, amber or green to match the rating. Sharepoint does not give you any easy way of doing this unfortunately.

This is where Jquery comes in. This terrific library of javascript offers developers a new and consise way of dealing with the internet document object model (DOM). With it developers can quickly and easily scan the object model of the page returned in the browser, and change the page before it is rendered. There is far more to it than this of course, but this is the trick I used to colour code the columns.

To colour (color) code a coloumn, follow these steps:

  1. Download the jquery.js library from teh link above, and upload it to your Sharepoint site in a convenient location (I use the Site Documents Collection in my top level publishing site, but anywhere will do)
  2. Edit the Sharepoint page that the holds the list, and add a Content Editor Web Part (CEWP).

  3. Edit the CEWP, choose the "edit source" option, and paste in something like the following code

<script type="text/javascript" src="http://<root site>/SiteCollectionDocuments/jquery-1.4.2.js"></script>

<script type="text/javascript">

$(".ms-vb2:contains('1: No Assurance')").each(function(){
$(this).css("background-color", "#FF0000");
//$(this).css("filter", "alpha(opacity=50)"); 

$(".ms-vb2:contains('2: Limited Assurance')").each(function(){
$(this).css("background-color", "#FF9900");

$(".ms-vb2:contains('3: Significant Assurance')").each(function(){
$(this).css("background-color", "#FFFF00");

$(".ms-vb2:contains('4: Full Assurance')").each(function(){
$(this).css("background-color", "#00CC00");


Note that in this example, the Jquery library is located at: http://<root site>/SiteCollectionDocuments/jquery-1.4.2.js. Change this to the URL of your own Jquery library.

In my example, the RAG rating column can contain the following values:
  • 1: No Assurance  (RGB #FF0000)
  • 2: Limited Assurance (RBG #FF9900)
  • 3: Significant Assurance  (RGB #FFFF00)
  • 4: Full Assurance (RGB #00CC00)

Now to explain what this is actually doing: "ms-vb2" is the standard Sharepoint site template CSS class that is used to identify columns in a list view web part.
What this Jquery script is effectively doing is looking for a DOM item with the class "ms-vb2", and in each case that it this
DOM item contains a specific piece of text ("1: No Assurance", "2: Limited Assurance" etc.), it modifies the CSS of this
particular section of the DOM to add a "background-color" CSS tag.

Of course your list will have different values, so remember to change the strings in bold to match your own list values!
The colour codes are standard RGB, so you may find this RGB table useful to decide your colours.

Your results will look something like this:
Best of luck!

Carissima Gold 9 ct Yellow Gold Two-Row Diamond Cut Curb Bracelet of 21 cm 8.5-inch on
Carissima Gold 9 ct Yellow Gold Two-Row Diamond Cut Curb Bracelet of 21 cm/8.5-inch