11/19/2008

SharePoint: Color Coding SharePoint Lists

SharePoint does not have an out of the box way to set colors based on the data in a list or library. There are both third party web parts and open source projects, such as codeplex.com, that can color code lists, but these usually require installing code on the SharePoint web servers. In this article we will look at color coding lists just using the built-in Content Editor web part and some JavaScript.

Each list will need a slightly different fragment of JavaScript to set the colors.

if (x[i].innerHTML=="Not Started") //find the data to use to determine the color { x[i].parentNode.style.backgroundColor='white'; // set the color }

//repeat the above for each data value

if (x[i].innerHTML=="In Progress") { x[i].parentNode.style.backgroundColor='lightgreen'; // set the color }

if (x[i].innerHTML=="Completed") { x[i].parentNode.style.backgroundColor='lightblue'; // set the color }

if (x[i].innerHTML=="Deferred") { x[i].parentNode.style.backgroundColor='lightgrey'; // set the color }

if (x[i].innerHTML=="Waiting on someone else") { x[i].parentNode.style.backgroundColor='orange'; // set the color }

}

} </script>

Code Notes:

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)

JavaScript to find this item in a table TD tag

JavaScript to assign a style to the TD

Here is the revised JavaScript fragment for a color coding a single cell:

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 } }

Mike, this works very well. Thank you for sharing this. One observation, for views that have grouping in them, the groups need to be defaulted to expanded for it to work. The colour then remains when collapsed/expanded. Makes sense when I think about it. If collapsed I guess the code doesn't find any values that match so it doesn't colour them. If you want another challenge....... how would we colour fields where the value is less than x, or between y and z, or greater than z, etc... ? Being able to do that too would be superb!! Best regards,

> I was trying to use the code, but I dont see any result in my List, I am using a Sharepoint Task List. No errors but no result as well.

Most likely a typing error. Check the bottom left of your browser to see if there is a JavaScript error icon. If so, then there is a syntax error in the JS, otherwise check the part of the JS that is matching the data in the list. Check for capitalization, "Pending" is not equal to "pending".

When grouping is enabled AND you set the default to Expanded, then the above JavaScript works. If the default is set to Collapsed then the JavaScript is running before the data has been downloaded. (You can confirm this by displaying a grouped task list with the groups defaulted to Collapsed, and then viewing the source of the page and searching for any of the task list data. It's not there.)

Love it. I wanted to have color coding for only the cell (instead of the whole row) so I changed 'x[i].parentNode.style.backgroundColor' to 'x[i].style.backgroundColor'. That way, I was able to color code 2 columns with a seperate set of colors.

We are currenting using WSS 3.0 and both are working for me. This great information and I will be checking every day for 'new' things. I would like to be able use the SharePoint calendar like the Outlook calendar, using different color 'bars' for the all day event(s). Thanks again :)

Numbers work fine, when they are simple numbers like ID. Here's an example:

if (x[i].innerHTML=="2"){x[i].parentNode.style.backgroundColor='green';}

The data type/column of "Number" displays as right aligned, so the innerHTML includes a DIV tag. The example would then be: (due to how blog comments work, you will need to replace square brackets with angle brackets)

=="[DIV align=right]123[/DIV]"

Capitalization is important in JavaScript, so to play it safe with all browsers you may want to convert the value to uppercase first:

Mike - Thanks for the example. I am not a Java programmer. I was able to color code specific fields using calculated fields. I was unable to get this script to work. Can you please instruct me on the key words to change. I assume 'ms-vb2' is the view name, but I am also unsure how to identify my view.I am using Sharepoint v 3.0 in a list format.Thanks

> I was unable to get this script to work. Can you please instruct me on the key words to change. I assume 'ms-vb2' is the view name, but I am also unsure how to identify my view.

'ms-vb2' is not a view name, it is a Cascading Style Sheet (CSS) class name used to link a CSS class to an HTML element. The steps in the article should work with any view of a list, and the web part and code would need to be added to each view page.

The "key words" would be the contents of the table cells such as "In Progress" and "Completed".

Should not matter by user, as long as they have the same permissions to the list. Their browser could make a difference. Are you both using the same browser and version? Do some testing by having them login using your browser and you using theirs.

I have been unsuccessful at executing your code. As others, I can view the javascript code in the calendar, and it is returning the color name and the title of the calendar item, but not any color. I've checkec all the code from the source editor to the Calendartxt field. I can't seem to get the javascript to work.

I am using your code to color-code rows in my SP list and it works perfectly. I have a question though - once a row is color-coded in the list, is there a way to maintain that row's color when the list is exported to Excel? We are running SP 2007 and Office 2007.

I was able to use this on a Task List and on the Calendar but not on a Document Library. When Editing the page, Sharepoint won't allow me to move the Content Web Editor Web Part below the List View web part. I'm getting the error "The file must be checked out. YOu must first check out the document before making changes". But it's the page that I am editing. Any ideas why?

First, Mike thatnk you so much, it works great. However, I was wondering if you can tell me how to color code (single cell, not the whole row) just like you show us, but using a different field in the list instead of "Status".. ??Let say that you make a new column name "Selections" with few choices. How can I color code a new column .. or any column besides the "Status" column.. Thank you so much Mike..

The code in this article does not care which column you are using. It just looks for key words. For example, if you had a column call Region with values like North, South, East and West, then just modify the code above to look for those four key words.

It would probably work, but you would need to confirm the name of the style being used for the table cells. (ms-vb for 2007) And it probably will work if you just remove the style test line: if (x[i].className=="ms-vb2")

1000x Thank you. It's people like you Mike who increase the significance of the internet. The details in this post have been added to my arsenal of HOW TOs. Much obliged. I'd thank you with a beer if you were here in Tokyo.

This script it great! Now I want to use it on a calculated field, but it won't work. I have it working on fields with text, but I have a calulated field that figures out if a task is past due and then returns text (red, green).Any idea?

Do a "view source" from the browser and search for your past due text and see if it is wrapped in any additional HTML. Calculated columns formatted as data or number with often have additional HTML in their output.

No, the colors won't export as they are just added to the final HTML, to the actual list. The closest you might come is to copy the data from the browser and paste it into Excel, but I think that will be messy.

Great script! I got it to work as is. The next step for me is I want to change what it looks for to highlight the row. Instead of status I want to compare a date in a column named Handoff-P with todays date and if it is greater than 15 business days difference no color, 14 - 10 business days difference the row color is yellow and 9 or less business days difference the row color is red

So if the date in Handoff-P is 10/12/11 the row would be yellow based on todays date of 9/26/11 (12 business days difference)

Just ordered your book...the preview on Amazon looks great. Does your book talk about color coding based on things like positive or negative values (i.e., if value < 0 make it red)Can't wait till the book gets here.

Can you post a snippet of code that shows how to apply color to a particular column - the entire column (i.e., column 7). I see the 'past due' blog, but I'm having trouble translating that past due date column logic to a regular number or text field.Thanks...the book is great by the way!

Mike,In your first example the script changes the entire row's background color but does not change the font color. In the second example it changes both the background and font colors but only for a single cell. I want to do example 1 (change the background color of the entire row) but also change the font color for the entire row as well. How do you do that?Thanks... Mike

// FOR GENERAL FIELDS if (x[i].innerHTML=="") //find the data to use to determine the color { x[i].style.backgroundColor='yellow'; // set the background color x[i].style.color='black'; //set the font color }

// FOR NUMBERS if (x[i].innerHTML.toUpperCase()=="[DIV ALIGN=RIGHT][/DIV]") //find the data to use to determine the color { // BACKGROUND FOR THE ENTIRE ROW x[i].parentNode.style.backgroundColor='yellow'; // set the background color // TEXT FOR THE ENTIRE ROW x[i].parentNode.style.Color.color='black'; //set the font color x[i].style.backgroundColor='yellow'; // set the background color x[i].style.Color.color='black'; //set the font color }

// FOR DATES if (x[i].innerHTML.toUpperCase()=="[NOBR][/NOBR]") //find the data to use to determine the color { // TO HIGHLIGHT THE WHOLE ROW x[i].parentNode.style.backgroundColor='yellow'; // set the background color // TO HIGHLIGHT THE WHOLE ROW x[i].parentNode.style.Color.color='black'; //set the font color x[i].style.backgroundColor='yellow'; // set the background color x[i].style.Color.color='black'; //set the font color } } }

Hi Mike,I'm trying to make a drop down list field called 'Rag' change colour depending on the choice, so I used this code to try and change it to Red, but can see the code in the web part and no change to the field. Can you see what I have done wrong?

if (Rag[i].className==”ms-vb2”) //find the TDs styled for lists { if (Rag[i].innerHTML==”Red”) //find the data to use to determine the color { x[i].style.backgroundColor='red'; // set the background color x[i].style.color='red'; //set the font color } }

As many people have said THANK YOU!! This is great. One question, I am looking at using this on some other lists also but I am not a coder by any means and was wondering if you could explin how to change to column it looks? I.e. If I wanted to change it from looking up the "Status" column to "Priority" column

I just thought I would share my solution to grouped lists issue that had previously been mentioned.

I found some javascript that collapses expanded groups in a list on page load that sits in a web part. So if you group a list and set the default to expanded and use your colour CEWP then that will apply to the cells/row and then the javascript will collapse the groups leaving the coloured cell/row in place

I have set this up on several sites and it works perfectly :)

Not sure if you allow external links on your blog posts but this is where I found the group collapse code: http://spyralout.com/tag/collapse-all-groups-sharepoint-list/

You should not have to change the code at all as it is simply looking for any list with a cell containing a keyword like "Not Started".

Two things to check:1) The code you posted above has word processing style quotes (”) instead of normal single quotes (') or double quotes (").2) Make sure the Content Editor Web Part is placed below the list web part you are wanting to impact.

> do I have to define what x[i] is?

No, the "x" is the collection of all of the TD tags found on the page and "x[i]" is one of the TDs that the FOR loop is checking.

Unfortunately it doesn't work if the Phrase that should be colored is a link (e.g. a Worklow-State). It works only if the phrase is pure text. I checked also the class style for the cells and it was also ms-vb2.

Awesome write up, thanks for this! I'm slightly stuck on one very simple area though and I was hoping you maybe able to help me.

What i want to do is set the background colour of a row and also change the text colour. Ive tried looking at both your examples but when i use the javascript line from your 'Row' CEWP code it only changes the text of the target cell as opposed to changing the text for that row.

The problem is that each column type (hyperlink, multiple lines of text, etc.) each have their own nested HTMl and CSS. The following will work with normal text and hyperlink columns to set the text to red.

if (x[i].innerHTML=="Pending") //find the data to use to determine the color { x[i].parentNode.style.backgroundColor='FF0000'; // set the colorvar theRow = x[i].parentNode;var cells = theRow.getElementsByTagName("TD");for (k=0;k 0){

for (k2=0;k2<Atags.length;k2++){Atags[k2].style.color="white";}}

} }

}

}

The only thing i haven't included is the script tags. This still doesn't work I'm afraid?

So your aware I have 3 columns in my document library, Managed metadata, single line of text and a choice field. (I also have the created by, modified by and checked out to columns)

Can you also let me know somewhere i can make a donation to you for your assistance so far. I have your book and only recently been getting right into some of your stuff and i feel it's only fair to give something back to someone who offers so much for nothing in return!

Which was probably damaged by the blog editor. In any case, it should look like this:

for (k=0; k < cells.length; k++)

Other things: - is there any JavaScript error being displayed, or an error icon in the browser's status bar at the bottom? - did you add the code to a Content Editor Web Part, and is it placed below the list web part? - have you changed any of the options for the list web part, especially the Async options? - which version of SharePoint?

I am trying to do this in SharePoint 2013 Office 365 Can you give me any incite on how to do this? I just want to make a list that I have show a color if it has a value in it. (ie. In Progress(Yellow), Closed (Red) etc...

The code above does not find the Status column, it finds TDs that contain the status values such as "Pending".

If you wanted to work with a particular column, then you would need to find the <TABLE> and then find the rows <TR> and select the "nth column" (nth <TD>). Remember that the first column will be column zero and all columns are counted (including icons, checkboxes etc.)

How do you then slect the specific column to be higlighted and to look for specific words;i.e my column is called Riska ratings and i want to change all Low - Green, Moderate - Yellow and so on - so only for this column?!

If those words are unique to that column, then just use the code above and have it look for "Low" instead of "In Progress" and display it in green. The JavaScript above does not care which list or column, only that it finds a cell with <td>Low</td>.

If the text could also show up in other columns then you might try something like this: Find all <tr> tags. Then check the Nth column (<td>) to see if it contains "Low".

var i=0; for (i=0;i<x.length;i++) { if (x[i].className=="ms-vb2") //find the TDs styled for lists { if (x[i].innerHTML=="Not Started") //find the data to use to determine the color { x[i].parentNode.style.backgroundColor='white'; // set the color }

it would be:

var i=0; for (i=0;i<x.length;i++) {

if (x[i].className=="ms-vb2") //find the TDs styled for lists {

if (x[i].Risk Ratins=="Low") //find the data to use to determine the color { x[i].style.backgroundColor='green'; // set the color }

i might be wrong in this case - that might be a reason it's not working - im a newbie and any help is greatly appreciated;

and where/how do i add the column number?

yes, I am looking for specific column caled Risk ratings - but hte values are shown all over place too.

I'm just going to add on top those two questions; so I do have specific column, which is column called CodeR, and its the 7th column from the beginning - hence i guess it makes it 6th since we count from zero; so my actual question is: what is the code to look for the Column CodeR, 6th Column, for the word Progress, to change to green, N/A to change to Grey and so on - i have these words accross the table so i only want that specific column to higlight - change the colors accordingly....I've been working on this for some time, and I am newbie at this, so any help is greatly appreciated:)Thanks

Hi Mike,I echo the thanks from everyone. The code works fantastic on different views in my main library.I'd like to use it on a page that has various views available for people and Easy Tabs script for navigation.I tried adding the CEWP to the web part zone with the code, but it doesn't seem to like it.I moved below a specific webpart view, below all and below the CEWP with the Easy tab html, but to no avail.

I've not used Easy Tabs, but looking at it I would guess that it takes each web part (including the CEWP with your code) and hides them, except for the web part in the selected tab. You may need to edit the page in SharePoint Designer and add the JavaScript just before the end tag of the PlaceHolderMain content tag.

> When I change the list style to Boxed or Newsletter I lose the color coding

Yes, I would expect that. Each of the view styles has its own set of HTML and CSS. The nesting of HTML would change the JavaScript needed that figures out the rows (parentNode). This would take some detective work with the IE F12 tools.