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.

2 Answers 2


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() {
  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?


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. enter image description here

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. enter image description here

<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:
//  This preserves conditional formatting after list filters are applied or cleared:
    window.onhashchange = listFormat;
//  Equivalent syntax:
//  window.addEventListener("hashchange", listFormat);
</script> ​​​​​​​​​


enter image description here

  • Thank You! Is it possible to define a range for the number? i.e. Display Red if between 0-10%?
    – Daryl
    Commented Apr 27, 2021 at 16:14

Your Answer

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

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