How to Highlight a Row on Active Status

Question

I have a column which should define in list if the issue is in status: -Not Started, Active, Completed.

I would like to ideally add some colour to this by the row for example if completed it is green or active it is red. Then it highlights the whole row, do you know if this can be edited within the columns settings or if there any step by step instructions that can be followed to make this change? (ideally for someone new to sharepoint)

Thank You

Answer 1

In SharePoint 2013 was introduced a so called Client Rendering Mode (CSR) which represents a rendering engine for list views, list forms and search results. I would recommend you to consider the following approach for your task.

Below example demonstrates how to highlight list task rows based on their status

Template code:

SP.SOD.executeFunc("clienttemplates.js", 
"SPClientTemplates", function() {
SPClientTemplates.TemplateManager.
RegisterTemplateOverrides({
     OnPostRender: function(ctx) {

       var statusColors =  {
      'Not Started' : '#FFF1AD',  
      'In Progress' : '#FFD800',
      'Completed' : '#01DF3A' 
   };

   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 = statusColors[status];
     }
    }
   }); 

});

How to apply the changes:

There are at least two options how to apply the changes:

1. Via JSLink property of web part.

2. Place JavaScript template on page via Script Editor/Content Editor web parts.

Here is how to apply the changes using the second option:

1. Switch the page into edit mode.
2. Add Script Editor webpart right below the list view web part.
3. Put the specified code by wrapping it using script tag code into the Script Editor, for example: {Template JS code goes here}
4. Save the page.

You can get more information about client side rendering, here.