CODEWITHSUNDEEP
sharepointconditional-statements
Philayyy
Philayyy

Reputation: 1927

Conditionally highlight rows in SharePoint 2016

I understand SharePoint lists are like excel, so I was wondering if it was possible to conditionally highlight whole rows/ cells based on the text value of a field.

I have a column in a list called "Status" with 4 options (initial, in progress, completed, awaiting developer resource). I would like to highlight these rows (or even just the status field) a different colour, depending on the value of the status.

Is this possible? Cant find anything relating to this for SP 2016

Cheers

Upvotes: 0

Views: 2263

Answers (1)

Jerry
Jerry

Reputation: 3625

Please use JavaScript to highlight the row based on the Status field:

<script type="text/javascript">
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     OnPostRender: function(ctx) {

       var statusColors =  {
          'initial' : '#FFF1AD',  
          'in progress' : '#FFD800',
          'completed' : '#01DF3A',
          'awaiting developer resource':'#ff0000'
       };

       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];
       }
     }
   }); 

});
</script>

And place the code above in a Content Editor Web Part in the list view page, so the list row will render different color based on status:

enter image description here

Upvotes: 1

Related Questions