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

Answer 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

Answer 2

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