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

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.

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