May 14, 2012

Change the Color of a Column in a List in SharePoint

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.
Scenario:
We have a custom list used for Project Tracking. In the list, we have column named STATUS for 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 better UI for tracking the status.
Solution:

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.
Add the below code in the script JavaScript tag
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var colorCode = document.getElementsByTagName("td")// finding all the TD tags
var i=0; 
for (i=0;i
{
if (colorCode[i].className=="ms-vb2")  
{ 
if (colorCode[i].innerHTML=="Not Started")//finding the word to which the color has to be set
{ 
colorCode[i].style.backgroundColor='lightblue'; // setting the color depending upon the value
colorCode[i].style.color='Black'; // setting the color of the words inside the content                                     
} 
if (colorCode[i].innerHTML=="Started")  
{ 
colorCode[i].style.backgroundColor='Brown';
colorCode[i].style.color='Black';
} 
if (colorCode[i].innerHTML=="In Progress")  
{ 
colorCode[i].style.backgroundColor='Orange';
colorCode[i].style.color='Black'; 
} 
if (colorCode[i].innerHTML=="Completed")  
{ 
colorCode[i].style.backgroundColor='green';
colorCode[i].style.color='Black'; 
} 
if (colorCode[i].innerHTML=="Deffered")  
{ 
colorCode[i].style.backgroundColor='Red'; 
colorCode[i].style.color='Black'; 
} 
} 
}

6. Now, you can see the status column background is changed depending upon the status inserted for each item as shown below:
It gives good interface to the users and also we can categorize the status easily.
Please free to comment and share the post, if it helps you!

18 comments:

  1. Hi
    will this work on sharepoint 2007 (MOSS)?
    I tried this but doesn't seem to work. Do I need to have some features turned on?

    ReplyDelete
    Replies
    1. It is based on simple JavaScript and hence it will work.

      Delete
  2. This will only work for views that have no grouping. Using javascript in a CEWP in a list view that contains grouping throws a "expected ;" error. It's a SharePoint bug. It's not a bug in the cewp.

    ReplyDelete
  3. Also, the td's are not available in grouping until the group is expanded. You would need to override the ExpCollGroup method in SharePoint.

    ReplyDelete
  4. If it doesn't work for you it's because of a wrong " ` " sign:

    'Black’

    should be:

    'Black'

    ReplyDelete
  5. Great Post! I worked great in a "Choice" column, but I can not make it work in a "Lookup" type of column, is it possible?

    ReplyDelete
    Replies
    1. Glad that it worked. No it won't work for Lookup columns.

      Delete
  6. your a genius. just tried it and it works. will be using it. Was wondering is there more code like this that will allow me to format a dataview, that is,

    a) wrap the column header names within the cell (like excel)
    b) colour the header row a differenr colour
    c) colour specific cells different colour
    d) colour column(s) a specific colour
    e) reduce the size of the text
    f) freeze the header row andor first columns
    g)generally treat it more like excel
    again, thank you all very much.




    ReplyDelete
  7. Where is the Java Script?

    ReplyDelete
    Replies
    1. Hi,
      Check the code added in the 5th point of the article.

      Delete
    2. There's no code on this article?

      Delete
    3. Hi SharePoint Perv,
      There are some problems in HTML part of the post and hence the code was not displayed earlier. I have updated it. Hope now you can use this code.
      Let me know if there are any problems in viewing the code.

      Delete
  8. I can't see the code either...

    ReplyDelete
    Replies
    1. Hi Julie,
      There are some problems in HTML part of the post and hence the code was not displayed earlier. I have updated it. Hope now you can use this code.
      Let me know if there are any problems in viewing the code.

      Delete
  9. This is an old post but I'm still going to ask if this works anymore because I can't get it working and don't realize where is the problem. I'm using Sharepoint 2013

    ReplyDelete
  10. The code here never worked for me. If you look at where the loop starts it's completely broken: "for (i=0,i......".
    After fixing the loop I could see it was finding every td element and definitely not optimized. Also, if you edited a cell it would cause all the of highlighting to disappear until you refresh the page.
    I rewrote the code and I hope it helps some of you that stumble upon this. My code is by all means not perfect nor optimized, however, it does the job. It highlights what it needs to and keeps running every 2 seconds which satisfies the condition of someone changing a cell to another value. I tested in SharePoint 2016. I wrote two versions, one that highlights the cell only and one that highlights the whole row.


    SET CELL COLOR:

    $(document).ready(function(){
    highlightList();
    });

    function highlightList()
    {
    $Text = $("td .ms-vb2:contains('Completed')").filter(function() {
    return $(this).text() == "Completed";})
    $Text.css("background-color", "green");
    $Text = $("td .ms-vb2:contains('In Progress')");
    $Text.css("background-color", "orange");
    $Text = $("td .ms-vb2:contains('Started')");
    $Text.css("background-color", "brown");
    $Text = $("td .ms-vb2:contains('Deferred')");
    $Text.css("background-color", "red");
    $Text = $("td .ms-vb2:contains('Not Started')");
    $Text.css("background-color", "lightblue");
    setTimeout(highlightList, 2000);
    }



    SET ENTIRE ROW COLOR:

    $(document).ready(function(){
    highlightList();
    });

    function highlightList()
    {
    $Text = $("td .ms-vb2:contains('Completed')").filter(function() {
    return $(this).text() == "Completed";})
    $Text.parent().css("background-color", "green");
    $Text = $("td .ms-vb2:contains('In Progress')");
    $Text.parent().css("background-color", "orange");
    $Text = $("td .ms-vb2:contains('Started')");
    $Text.parent().css("background-color", "brown");
    $Text = $("td .ms-vb2:contains('Deferred')");
    $Text.parent().css("background-color", "red");
    $Text = $("td .ms-vb2:contains('Not Started')");
    $Text.parent().css("background-color", "lightblue");
    setTimeout(highlightList, 2000);
    }


    Happy coding!

    -Kevin

    ReplyDelete
  11. Nice article. It's very helpful to me. Thank you for share with us. Can you please check my Top logo color hex code collection.

    ReplyDelete

Dear Readers,

I LOVE to hear from you! Your feedback is always appreciated. I will try to reply to your query as soon as possible.

1. Make sure to click the "Notify me" check box at the right side to be notified of follow up comments and replies.
2. Please Do Not Spam - Spam comments will be deleted immediately upon review.