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.
To colour (color) code a coloumn, follow these steps:
- 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)
- Edit the Sharepoint page that the holds the list, and add a Content Editor Web Part (CEWP).
- Edit the CEWP, choose the "edit source" option, and paste in something like the following code
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:
|Carissima Gold 9 ct Yellow Gold Two-Row Diamond Cut Curb Bracelet of 21 cm/8.5-inch|