How to create traffic light indicator in sharePoint list? [duplicate]

Question

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.

Answer 1

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() {

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     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.

2. Upload your JS file to a library within a site.
3. Go to your list view in SharePoint, start editing the page.
4. Select the list view web part and go to it's properties.
5. Expand Miscellaneous and specify the location of a JLink file.

Answer 2

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/

Answer 3

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.