I have 'Status' column having values 'Draft','Completed','In progress', 'Backlog'

Now I want to show corresponding Color code in 'traffic light' column.

  • Draft-->Grey
  • Completed-->Green
  • In progress-->Yellow
  • Backlog-->Red

Kindly let comment if you have inputs regarding the same.

  • Hi user47524, this post is similar to what you are looking to do: link
    – Tally
    Jan 18, 2018 at 10:09
  • No whatever link you have provided Its about hide calculated column
    – user47524
    Jan 18, 2018 at 10:27
  • If you look at Patrick's answer it details how to show coloured traffic light icons, depending on the value found in a field
    – Tally
    Jan 18, 2018 at 11:43
  • You can achieve this using a simple workflow with "MultiLineText" column. refer this techtrainingnotes.blogspot.in/2018/01/… Jan 18, 2018 at 13:19

3 Answers 3


I found the following answer on a related question I hope this helps

Follow these steps: 1. Get your coloring logic in a JS file. An example:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

     OnPostRender: function(ctx) {

       var colors =  {
          'Pending' : '#40f600',  
          'Running' : '#f9af00',
          'Completed' : '#f93030' 

       var rows = ctx.ListData.Row;
       for (var i=0;i<rows.length;i++)
          var status = rows[i]["Status"];
          var rowId = GenerateIIDForListItem(ctx, rows[i]);
          var row = document.getElementById(rowId); 
          row.style.backgroundColor = colors[status];

This script sets the color based on a value of the Status column.

  1. Upload your JS file to a library within a site.
  2. Go to your list view in SharePoint, start editing the page.
  3. Select the list view web part and go to it's properties.
  4. Expand Miscellaneous and specify the location of a JLink file.
  • this solution it is not working, I want to show the color into the 'traffic light' column.
    – user47524
    Jan 18, 2018 at 12:20

I think you can use conditional formatting in SharePoint Designer for an OOTB solution but It's less than ideal. I also think Microsoft used to have a KPI webpart which they did away with for no good reason.

Most decent solutions involve a javascript library which will reformat your list. I have used a version that had calculated columns which generated HTML and js that rendered it on the page. Similar solution to what I used is detailed here: http://eimagine.com/creating-a-stoplight-color-coded-status-in-a-sharepoint-list/


Conditional Formatting is not available in designer 2013 in the same way it was in previous versions. It does however feature Client Side Rendering or JSLink

This may be worth taking a look at for a further information: Conditional Formatting on SharePoint 2013 Designer

This is related to a similar question and might help provide you with a solution.

Not the answer you're looking for? Browse other questions tagged or ask your own question.