SharePoint 2016 Classic Experience Column Formatting

Question

I have a custom list which displays numerical variance as a percentage. I would like to color code the numerical value based on it's value. i.e. 10% displays in red.

I am using SharePoint 2016 on-premise with the classic experience enabled.

I tried JSON, however it did not work. Any help would be appreciated.

Answer 1

JSON formatting will not work in SharePoint 2016 classic experience.

For your requirement, you have to use Client Side Rendering in SharePoint.

Try something like below:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
  OnPostRender: function(ctx) {
     var rows = ctx.ListData.Row;
     for (var i = 0; i < rows.length; i++) {
         var numVariance = rows[i]["Variance"]; // use internal name of your number column here
         var rowId = GenerateIIDForListItem(ctx, rows[i]);
         var row = document.getElementById(rowId);
 
         // Add your conditions & color formatting here like
         if(numVariance <= 10) {
             row.style.backgroundColor = "#FF0000"; //Red color
         } else if (numVariance <= 50) {
             row.style.backgroundColor = "#FFFF00"; //Yellow color
         } else {
             row.style.backgroundColor = "#00FF00"; //Green color
         }
     }
   }
}); 
});

Where Variance is the internal name of your SharePoint column.

For more information, check this: SP 2013: Highlight Row if Field Value is empty

You can get the internal name of your column by following this article: How to find the Internal name of columns in SharePoint Online?

Answer 2

SharePoint 2016 classic experience does not support JSON formatting.

Based on your description, I understand that you want to set SharePoint list column background color according to column contents.

Here’re steps:

1.Edit page -> Add a content editor web part.

2.Press F12, find column ID.

3.Edit page -> Edit source -> Add following codes.

Note: You should replace "ms-vb-lastCell.ms-cellstyle.ms-vb2.ms-vb-lastCell" with ID found in previous step.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script><script>
function listFormat() {        
        $Text = $("td .ms-vb-lastCell.ms-cellstyle.ms-vb2.ms-vb-lastCell:contains('10%')");
        $Text.css("background-color", "Red");
        $Text = $("td .ms-vb-lastCell.ms-cellstyle.ms-vb2.ms-vb-lastCell:contains('20%')");
        $Text.css("background-color", "Yellow");
}
//  This invokes the function defined above once the page Document Object Model (DOM) is ready for JavaScript code to execute:
    $(document).ready(function(){
        listFormat()
}); 
//  This preserves conditional formatting after list filters are applied or cleared:
    window.onhashchange = listFormat;
    
//  Equivalent syntax:
//  window.addEventListener("hashchange", listFormat);
</script> ​​​​​​​​​

4.Result.