There are often times when it’s useful to draw attention to particular items in a SharePoint list or library. For example, you might want to highlight overdue tasks, colour-code items according to priority, or draw attention to undesirable information. In other words, you want to apply conditional formatting based on field values. Now, as you probably know, SharePoint 2010 uses XSLT-based list views by default. By editing the XSLT for a list view you can apply all manner of rules and conditional formatting. Even better, SharePoint Designer 2010 includes some built-in tools that will figure out the XSLT for you. In the List View Tools tab group, on the Options tab, there’s a handy dropdown menu:
In most cases, you’re probably going to want to apply conditional formatting by row. First you set your conditions:
Then you choose the styles you want to apply when the conditions are met.
When you’ve set your style, SharePoint Designer modifies the XSLT so that your formatting is rendered as an inline style on the row (
) element when your conditions are met. I’ve stripped out some of the less relevant attributes to improve readability.
So far so good. Everything looks correct in SharePoint Designer. However, if you’ve tried this, you might have found that when you load the list view in the browser you get mixed results – in particular:
- Changing background colours and text decorations (such as bolding or italics) works fine.
- Changing fonts or font colours works in SharePoint Designer but doesn’t work in the browser.
As a result, you’ll end up with something like this when you view the list through the browser:
A quick web search revealed that I’m not the first person to encounter this, and I’ve yet to see a definitive answer, so here goes.
Short version – the problem is down to the way the default styles are structured in corev4.css. Row styles do not cascade down to individual cells (regardless of whether you append an !important flag). If you want to change the background colour, apply conditional formatting at the row level. If you want to change the font colour, and you don’t fancy messing around with CSS, apply conditional formatting at the column level.
Long version – read on for a more detailed explanation…
Using IE Developer Tools, you can take a look at how styles are applied to individual HTML elements on the page. The XSLT rule created by SharePoint Designer applies an inline style to a row (tr) element. If we use IE Developer Tools to look at how the row is styled, we can see that everything looks correct – the inline style takes precedence:
However, if we look at how the text within one of the individual cells is styled, you can see that our inline style at the tr level is getting overridden by a more specific style, defined by thems-vb2 class, at the td level.
Unfortunately there’s not much we can do about this. If you want to modify any of the styles defined by the ms-vb2 class, such as font, font size and font colour, you need to create a column-level rule rather than a row-level rule. The two types of rules work in exactly the same way in SharePoint Designer—when you create a column-level rule, you can still set conditions based on any field value, not just the column to which you are applying the conditional formatting. If you want to conditionally change the font colour of an entire row, you simply create a column-level rule on every column. This time, SharePoint Designer modifies the XSLT so that your formatting is rendered as an inline style on the column (
|) element when your conditions are met:
This time the browser will render the view as expected. The following image shows the results of a column-level rule on the Target Pub Date column, in addition to the row-level rule described earlier.
If we take a look at the CSS, we can see that our inline column style is overriding the styles provided by ms-vb2.
In summary, there’s no real difference between row-level conditional formatting and column-level conditional formatting, other than the scope at which your inline styles are applied. In practice you may often need to use a combination of the two in order to realise a particular style or effect.
In this article, we will know how to change the color of a column based upon the values in the column. It is something like “Color Indicator” in SharePoint.
We have a custom list used for Project Tracking. In the list, we have column named STATUSfor tracking the project.
Whenever an item in the list is updated with the status in the column, then the background color of the status column should automatically change depending upon the status. Hence it gives a proper UI for tracking the status.
1. Create a custom list named “Project Tracking System” with the columns such as “Title”, “Description” and Status with the data type as shown below:
Columns with the data types to be created:
2. Now, we will insert 4-5 items in the list created.
In the above list, we can see that the status column is updated, but it would be good when we have background color of the each status separately. It is gives easy tracking to the users.
3. We can achieve this through JAVA SCRIPT.
4. Add a Content Editor Web part below the list as shown below:
5. Now in the content editor web part, add the below java script code (Open the tool pane -> Source Editor -> Place the Java Script -> Click Ok) and save the page.
6. Now, you can see the status column background is changed depending upon the status inserted for each item as shown below:
It is gives good interface to the users and also we can categorize the status easily.
Color Coding SharePoint Lists – without custom web parts or server code deployments
Color coded calendars?
For other lists and libraries you will find examples below to:
- Set color backgrounds for rows in task lists to show the status of the task
- Set colors in libraries to show approval status
- Set the color of a single column based on its value
Example 1: Set the background color of a row based on data in the row
To color code a row all we need is:
- A column to check (such as the Task Lists’ status column)
Here is the example for a task list:
- x[i] is one of the table cells (TD)
- x[i].innerHTML is the contents of a cell (TD) (which may include additional HTML)
- x[i].parentNode is the row containing the cell (a TR)
- x[i].parentNode.style.stylename is used to set any valid style on the TR
Example 2: Set the color of a field based on data in the field
To color code a cell all we need is:
- A column to check (such as the Task Lists’ status column or a library’s approval status column)
if (x[i].className==”ms-vb2″) //find the TDs styled for lists
if (x[i].innerHTML==”Completed”) //find the data to use to determine the color
x[i].style.backgroundColor=’darkblue’; // set the background color
x[i].style.color=’white’; //set the font color
SharePoint doesn’t provide an out of the box way of color coding lists. But, thank goodness, we can use a little scripting to edit the styling of our lists!
Mike Smith provided a great script that allows you to color the background of the row if the cell’s value matches the value it’s looking for. But, what if another field in the same row has one of the other values and throws off your color coding?
Case in point: color coding is thrown off because the Description field
can have the same value that is being used to color code on
Well, this script below will search only the cell index of the row that you would like to base your color coding on. In our case, we would like to search only on the Status field/column. To get started:
1. Add a content editor web part directly underneath the list
2. Open the source editor and place the script below into it
3. Modify the columnIndexToSearch and the columnSpan variables to match the cell/field index to search for and the number of cells in each row respectively.
Note: In this case, the attachment field counts as a cell. Since we are searching only on the Status, our columnIndexToSearch is 2 (0 = Attachment field and 1 = Title field). The total number of columns we are displaying on our list is 5. If you add or remove columns in the view, the color coding will get thrown off. So, make sure to update these variables if you do make updates to the list view.
Final Result: Color coded based on the Status column only