Creating a Stoplight Color Coded Status in a SharePoint List

Link to Article

Recently I was tasked with creating a report for our PMO that showed information about all of our current projects and a stoplight status indicator on whether the project was on track or not. After doing some research online, I found out that I could create a calculated field based on a status and display a colored circle that will help executives quickly view the status of each project. I have created a tutorial to show the steps, so that you can create your own colored status field in SharePoint.

In our case we used the following status codes:

• Green = Project is on track
• Yellow = Project is falling behind
• Red = Project is behind
• Purple = Project is on hold

Important Note: For the calculated field to work, you will need to make sure that your Status field contains a number, because we will base the color selected on this number. See the Status column in the screen cap in step #1 below.

1. Navigate to List Tools -> List -> List Settings.
   
2. Click on Columns -> Create Column.
3. Enter the Column Name, select Calculated as the field Type.
   
4. Enter in the following Formula and click the OK button.
   Note: that the formula is selecting the 1st character of the value in the Status Column “LEFT(Status,1)“. If the number in your status field is in a different location you may have to adjust the formula a little to get the correct result. The number in the status column is then used in the CHOOSE() function to determine which color should be used. In our example if the number is 1 then it will be green, if the number is 2 the color will be orange and so on.
   
="<DIV style='font-weight:bold; font-size:24px; font-size:24px; color:"&CHOOSE(LEFT(Status,1),"green","orange","red","purple")&";'>•</DIV>"






5. You will notice that our Stoplight column displays the HTML code we entered in the Formula field rather than actually displaying our colored circles. This is because we still have one more setting to change…
   
6. Navigate to Site Actions -> Edit Page and click the Add A Web Part link.
   
7. Select the Content Editor Web Part from the Media and Content Category and click the Add button.
   
8. On the Content Editor Web Part click the link that says Click here to add new content, and then click HTML -> Edit HTML Source.
   
9. Paste in the following code into the HTML Source and click OK.
<script type="text/javascript">
/* Text to HTML - version 2.1.1 */
function TextToHTML(NodeSet, HTMLregexp) {
var CellContent = "";
var i=0;
while (i < NodeSet.length){
try {
CellContent = NodeSet[i].innerText || NodeSet[i].textContent;
if (HTMLregexp.test(CellContent)) {NodeSet[i].innerHTML = CellContent;}
}
catch(err){}
i=i+1;
}
}
// List views
var regexpTD = new RegExp("^\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*$");
TextToHTML(document.getElementsByTagName("TD"),regexpTD);
</script>


10. Drag the Content Editor Web Part to position below your Project Status Report.
11. Navigate to Page -> Stop Editing to save your changes.
    
12. And you now have a colored status indicator for your report using a Calculated Field based on the Status of your projects!