Blog

Color Coding Lists in SharePoint 2013, 2016, or Office 365

Color Coding Lists in SharePoint 2013, 2016, or Office 365
Anjali Bharadwa
Anjali Bharadwa
12/15/2014
43 Comments

My last video blog on color coding in 2010 was a huge success and now that everyone is moving to Office 365, I often get questions about how do we make this work in SharePoint 2013, or later. (If you are wondering why you should upgrade to newer versions of SharePoint, check out 10 Reasons Why Business Users Should Upgrade to SharePoint 2013.)

There is one key difference, which if you do not complete, your color code icon will not display. The new step is to change the list web part to a style of Basic Table instead of Default.  Follow these simple updated steps and you will be color coding lists on Office 365 in no time!
For a list of available colors, click here

Watch the video tutorial:

  • Step 1 - Create a “Status Indicator” column in your list. This column can either be calculated using other data within the list or selected manually upon creation.

Example:

=IF(OR(Status="Not Started",Status="Deferred"),"Yellow",IF(OR(Status="In Progress",Status="Complete"),"Green",IF(Status="Waiting on Someone Else","Red")))

  • Step 2 - Create a “Status” column that is a calculated value. The output is a single line of text. Copy and paste this into the calculated field:

="<DIV style='font-weight:bold; font-size:50px;margin-top:-30px; color:"&[Status Indicator]&";'>•</DIV>"

  • Step 3 - Add the list to your web part or wiki page
  • Step 4 - Edit the web part to show the Status column and change the Style to Basic Table
  • Step 5 - Add a Content Editor Web Part directly underneath the List/Task Web Part
  • Step 6 - In 2010 and 2013, you will need to load the below code to a location on your site in a text file and point the content editor to the location. In 2007, you can copy and paste the below code into the content editor settings box itself.
?
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
34
35
36
37
38
39
<script type="text/javascript">
  //
  // Text to HTML
  //
  var theTDs = document.getElementsByTagName("TD");
  var i = 0;
  var TDContent = " ";
  while (i < theTDs.length) {
    try {
      TDContent = theTDs[i].innerText || theTDs[i].textContent;
      if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
        theTDs[i].innerHTML = TDContent;
      }
    } catch (err) {}
    i = i + 1;
  }
  //
  // ExpGroupRenderData overwrites the default SharePoint function
  // This part is needed for collapsed groupings
  //
  function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
    var tbody = document.getElementById("tbod" + groupName + "_");
    var wrapDiv = document.createElement("DIV");
    wrapDiv.innerHTML = "<TABLE><TBODY id=\"tbod" + groupName + "_\" isLoaded=\"" + isLoaded + "\">" + htmlToRender + "</TBODY></TABLE>";
    var theTBODYTDs = wrapDiv.getElementsByTagName("TD");
    var j = 0;
    var TDContent = " ";
    while (j < theTBODYTDs.length) {
      try {
        TDContent = theTBODYTDs[j].innerText || theTBODYTDs[j].textContent;
        if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {
          theTBODYTDs[j].innerHTML = TDContent;
        }
      } catch (err) {}
      j = j + 1;
    }
    tbody.parentNode.replaceChild(wrapDiv.firstChild.firstChild, tbody);
  }
</script>

Contact our team today to get started on your next SharePoint project and learn more about our SharePoint expertise. 

Related Blog Posts

Comments

Dorinda
# Dorinda
I have this working but I have three webparts on the page that it needs to apply to and I can't figure out how to get it to work with all three webparts.

Please help!
CICI
# CICI
I've created succesfully just like on the video but this is not exactly what I need.
How can I make multple color status for 1 item/line just like example picture of a project list above?

When I create another column with other label (ex. progress) and copied the same formula to it then the color was exactly the same with already in the column "Status". I can't adjust the color individually.

Thanks in advance for any reply
JCarreon
# JCarreon
Hello
Where is the script code for step6? I do not see it.
MK
# MK
Hi; I am looking for the "code below" for some reason I am not able to find it.....any hints .... thank you
F Hersh
# F Hersh
Does anyone have the code that is supposed to go in the .txt file? I cannot locate it. "In 2010 and 2013, you will need to load the below code to a location on your site in a text file and point the content editor to the location."
Vince
# Vince
I'm so sorry , but I've been searching for the last 30 mins and I can not find the code to insert into the content editor settings box :S
Mansuri
# Mansuri
where is the txt file with code?
Dug
# Dug
Greetings Ms. Anjali Bharadwa,

A Calendar is a list, however when we try "edit the current view", there is no option to change the style!!
How can we change the Style to Basic Table in calendars?

Thank you in advance,

Dug
Steve
# Steve
# kim
Thursday, January 14, 2016 1:10 PM
when I do this it works, but when I try to collapse/group the list the stoplight disappea4s and the code shows.how can I fix that

Anyone every figure out how to get this to work with collapsed grouping? As Kim stated, adding grouping displays the code and the color indicators disappear.
Dug
# Dug
Greetings Ms. Anjali Bharadwa,

Since CalendarsOverLay color options are limited, how can we use this color coding approach for calendars?

Thank you in advance,

Dug
Ray Riedel
# Ray Riedel
I have also tried this over and over again..... using SharePoint 2013 ...my status only returns the code along with the color it pulled from the status indicator. For example: <DIV style='font-weight:bold; font-size:50px;margin-top:-5px; color:Green;'>•</DIV>. The color says green so I know it is pulling the information correctly, It just will not display as a colored bullet. I copied the script provided, saved it as a text file, and linked it to a context editor. I have not idea what is wrong...help with troubleshooting would be greatly appreciated
Michael Dannemiller
# Michael Dannemiller
You'd have to nest the if statements as we did here. so IF( OR(Status = "Not Started", Status = "Deferred"), Grey, IF(Status="In Progress), Yellow, IF(Status="In Progress", Green, Red))). In general the if statements have this format: IF(Condition, Value if true, value if false), when we nest them what we're saying is IF the condition is true, then choose one color, if not, check a second if statement, and so on and so forth.
Brian
# Brian
The example code provided for the calculated status indicator is making the icons yellow if "Not Started" or "Deffered", Green for "In Proress" and "Complete" , Red for "Waiting on Someone Else". What code would be used for: Unshared if "Not Started" or "Deffered", Yellow for "In Progress", Green for "Complete" , Red for "Waiting on Someone Else"?
Habib
# Habib
Hi,

i want to color the full row with red.
Akash
# Akash
One question:

Why it doesn't work on default view?
with the others views we are not able to see the search box & the links to switch Views on the top of the list.

is there any Solution for thir problem?
Mads Siggaard
# Mads Siggaard
I want to share my experience with Color coding on SharePoint in office365. Because this approach do NOT work out of the box in the Cloud.
There are no Content editor web part available as standard because scripting is disabled in office365.

You need to turn on scripting in the SharePoint admin site and launch a code in SharePoint online management shell

Please see details here
https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f?ui=en-US&rs=en-US&ad=US
Tim
# Tim
Hello Anjali,

Can you tell me how you created the "View Notes" link for your notes column?

Thank you,
Tim
Deven Shah
# Deven Shah
Thank you @Anjali for this great step by step tutorial. I had this working on Sharepoint 2007 and when we migrated to Sharepoint Online, it broke. A lot of folks tried to fix this but were unable to. With this video, I was able to get it fixed. Thanks again!
Abhay
# Abhay
I followed every step and my final result is that the status returns as code instead of the color it is pulling. It is pulling the correct colors but is not displaying the colored symbol.

EX:

<DIV style='font-weight:bold; font-size:50px;margin-top:-30px; color:Red;'>•</DIV>

Any idea how to fix this??
Ayyoub Benoudina
# Ayyoub Benoudina
Amazing Thank you Anjali for the post.

One question:

Why it doesn't work on default view?
with the others views we are not able to see the search box & the links to switch Views on the top of the list.

is there any Solution for thir problem?

Thanks in advance

Ayyoub
Mele
# Mele
Hi Question, how do I update the colour from black to amber?
Christopher.YYC
# Christopher.YYC
Just completed the steps you outlined and it worked great for me (Sharepoint 2013). Thanks very much!
Lise
# Lise
I've the same problem with the Status column returning codetext instead of a colored dot. What to do?
nicole
# nicole
I followed every step and my final result is that the status returns as code instead of the color it is pulling. It is pulling the correct colors but is not displaying the colored symbol.

EX:

<DIV style='font-weight:bold; font-size:50px;margin-top:-30px; color:Red;'>•</DIV>

Any idea how to fix this??
Ariel Hendricks
# Ariel Hendricks
I have tried this over and over again. Using Office 365 or "sites" my status just returns the code along with the color it pulled from the status indicator. For example: <DIV style='font-weight:bold; font-size:50px;margin-top:-5px; color:Green;'>•</DIV>. The color says green so I know it is pulling the information correctly, It just will not display as a colored bullet. I copied the script provided, saved it as a text file, and linked it to a context editor. I have not idea what is wrong, any suggestions?
Dan
# Dan
Clarification to my comment below in case you do not want all items to be variables.

Please use the two references below if you are using a single color or standard text you need to replace “&TEXT&” in the first example with the colors or text you don’t want to be a variable.

With Equation or Column References
="<DIV style='; font-size:12px; text-align:center ; color:"&EquationOrColorForText&"; background-color:"&EquationOrColorForBackground&";'>"&EquationTextOrColumn&"</DIV>"

Standard Text and Colors
="<DIV style='; font-size:12px; text-align:center ; color:White;background-color:Black;'>Text</DIV>"

If you write the equations into HTML you will NOT have to create a Status Indicator column.

Again thanks to Carlos and Anjali.
Dan
# Dan
Thanks to Carlos for giving me the idea.
I messed with the HTML until I could edit the whole cell background color and place calculated text or string of text in each cell. I also added a text center align for the displayed text.
I also combined the equations with the <DIV> columns so I wasn't needing to create 2 columns when one long equation would do.

You can change the cell background color, text color, and displayed text. I tested the equations in excel so I knew the logic was correct but make sure you work within the equation limitations of SharePoint.

="<DIV style='; font-size:12px; text-align:center ; color:"&EquationOrColorForDisplayedText&"; background-color:"&EquationOrColorForBackground&";'>"&EquationOrTextYouWantDisplayed&"</DIV>"

Hopefully this helps someone out there and big thanks to Anjali for a great post.
Min Htet
# Min Htet
How jquery library we need for that code ?
Mark
# Mark
This tutorial worked great; however, just for my first column of status indicators. The next several columns of status indicators that I duplicated through these steps did not reflect the appropriate colors. It stayed on the default color (black). Is there something in the script I need to modify?
carlos
# carlos
thank you for the post!!
I have a question. I tried instead of just changing the font, change the background color, which was not an issue since I used
<DIV style='font-weight:bold; font-size:50px;margin-top:-5px;background-color: :"&[Status Indicator]&";'>mytext</DIV>

Now the next step is I am bringing some data that I am placing in mytext and the and the color I want in a single line of text field. The resultant text would look like

="<DIV style='font-weight:bold; font-size:50px;margin-top:-5px;background-color: red;'>Sales Representative</DIV>"

but it does not work with a single line of text.

Do you have any suggestion for my particular case?

Thank you in advance and for this post!!

Carlos
Cathy Hennessy
# Cathy Hennessy
Hello,

Great video! Thanks!

You solved one of my problems... that being that my status's weren't showing on my home page... I have three status's I need to reflect. However, they are all showing 'purple'...despite choosing other options.

Any suggestions that you can recommend?
Joakim
# Joakim
Hi,

Thanks for the guide, however something in the script makes date entries dissapear.
I have for example a Project end date column. I can sort by dates so they still contain data, but it is not visible.
Syed
# Syed
not working for collapsed grouping
Lynn
# Lynn
I have been searching for how to do this for days!!
Thank you so much - worked first time!!!
Nicole
# Nicole
I'm struggling to edit my page - I can add a CEWP but I can't move it beneath my list. I can't navigate beneath my list or add any space above it?? I'm using Sharepoint 365.
Can you please help?
kim
# kim
when I do this it works, but when I try to collapse/group the list the stoplight disappea4s and the code shows.how can I fix that
Vivian
# Vivian
For me the above steps worked, but now the options to edit the list settings has disappeared. Anyone with same issue and resolution
YuAndre
# YuAndre
Thanks a lot! This is the clarity that SharePoint Administrators need in order to implement solutions into organizations. I ran into a small issue with the status color not lining up with the row but I fixed it with the following modification to the status column:

="<DIV style='font-weight:bold; font-size:50px;margin-top:-5px; color:"&[Status Indicator]&";'>•</DIV>"
Dave Randall
# Dave Randall
You just saved me a ton of work. Thanks for sharing this!!
Chris Cundy
# Chris Cundy
Is it possible to colour code a row as well as having colour coded bullets at the same time?? I've tried and it seems to be either one function or the other - not both.

Please advise whether this is possible

Thanks.
Jens Frederik Frederiksen
# Jens Frederik Frederiksen
Worked perfectly - Thank you!
Courtenay Hoffman
# Courtenay Hoffman
This was crystal clear and extremely helpful! Worked perfectly on the first try. Thank you!
Michael Dannemiller
# Michael Dannemiller
In attempting to resolve this error myself, I discovered that a script editor web part directly under the list web part also serves the same purpose as the text editor. This was not an option in versions of SharePoint prior to 2013.

Post a comment

Name (required)

Email (required)

CAPTCHA image
Enter the code shown above:

loading