Background color on column

Question

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

Is this SharePoint Online? – theChrisKent Feb 19 '19 at 22:07 — theChrisKent, Feb 19 '19 at 22:07

score 1 · Answer 1 · answered Feb 20 '19 at 05:58

1

For SharePoint Online(Modern UI):

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

References:

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:

How to Highlight a Row on Active Status

answered Feb 20 '19 at 05:58

Ganesh Sanap - MVP

44,918
21
30
61

I tried a different script (above) and still don't work. :( Thanks anyway for the help! – fjavier415 Feb 21 '19 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. – Ganesh Sanap - MVP Feb 21 '19 at 15:54
Check this link for more information. – Ganesh Sanap - MVP Feb 21 '19 at 15:55

score -1 · Answer 2 · answered Feb 19 '19 at 23:26

-1

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

answered Feb 19 '19 at 23:26

Carl

50
1
2
8

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

Background color on column

2 Answers2