0

I am not a SharePoint guru and I don't know much about coding. I have a list which I would like to change the background color of the cell or row based on the Priorities ( (1) Critical, (2) High, (3) Medium, (4) Low).

Let's say Critical = red, High = orange, Medium = gold, Low = green.

I tried the use of calculated columns. (Which I have two right now) One of them is Color and the other one ColorBackground (). Not sure if I need two of them.

I guess the last step if some script to add the background color to the Priority column.

Can someone help??


I tried this using Content Editor wrap it as script. I changed the Share Point style to Basic Table and It didn't work.

      SP.SOD.executeFunc("clienttemplates.js", 
    "SPClientTemplates", function() {
    SPClientTemplates.TemplateManager.
    RegisterTemplateOverrides({
    OnPostRender: function(ctx) {
    var PriorityColors =  {
   '(1) Critical' : '#f08080',  
   '(2) High' : '#ffa07a',
   '(3) Medium' : '#ffff00',
   '(4) Low' : '#9acd32'
   };

   var rows = ctx.ListData.Row;
   for (var i=0;i<rows.length;i++)
    {
     var Priority = rows[i]["Priority"];
     var rowId = GenerateIIDForListItem(ctx, rows[i]);
     var row = document.getElementById(rowId); 
     row.style.backgroundColor = PriorityColors[Priority];
      }
     }
    }); 
   });
2
  • Is this SharePoint Online? Feb 19, 2019 at 22:07
  • SharePoint 2013
    – fjavier415
    Feb 21, 2019 at 14:36

2 Answers 2

1

For SharePoint Online(Modern UI):

You can use json formatting to conditionally color fields in sharepoint online.

References:

  1. How to color code a SharePoint list date field based on comparison with todays date?
  2. Apply conditional formatting.

For SharePoint 2013/2016, SharePoint Online(Classic UI):

You can use Client Side Rendering (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.

References:

  1. How to Highlight a Row on Active Status
3
  • I tried a different script (above) and still don't work. :( Thanks anyway for the help!
    – fjavier415
    Feb 21, 2019 at 14:37
  • Are you getting any error? And where are you adding this script? This is JSLink code so you are supposed to add its link in the web part properties. Feb 21, 2019 at 15:54
  • Check this link for more information. Feb 21, 2019 at 15:55
-1

This is a pretty good video on how to color code columns in SP. https://www.youtube.com/watch?v=od0XuwUsusc

1
  • Thanks for the video. I tried a different script (above) and still don't work. :(
    – fjavier415
    Feb 21, 2019 at 14:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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