1

enter image description hereenter image description hereI 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

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.

  • I seem to have some limitations with this due to permission aspect. Is there anyway to do the colours via column formatting on JSON as per column? – fazsnatch Oct 24 '18 at 9:17
  • Also how do you add this to a list and not a page? – fazsnatch Oct 24 '18 at 9:31
  • go to your list, in All Items or anyother view-->Click gear(settings) icon on top right--> select Edit page --> Add web part(follow process given in answer). – Ganesh Sanap Oct 24 '18 at 9:48
  • If you want to color the whole row of item then follow the steps given in answer above. or if you want to create one more column to show the colored status based on Status column, that can also be possible....let me know about this. – Ganesh Sanap Oct 24 '18 at 9:50
  • Yes I tried this 'go to your list, in All Items or anyother view-->Click gear(settings) icon on top right--> select Edit page --> Add web part(follow process given in answer).' but seems like it is greyed out when I try to use it strangely. – fazsnatch Oct 24 '18 at 10:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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