Color Coding List Item by Web Part based on value

Question

I am currently trying to get color coding on a list to highlight good medium and bad properties.

I have tried to follow the examples shown here for color coding: SharePoint 2013 Client Side Rendering: List Views

As well as here: Color code item row based on column value in SharePoint Foundation 2013

I cannot figure out why none of the approaches are succeding for me. I have placed it as a webpart on the site and tested that i was able to modify the tables by just adding a footer text. But it must be something about reading the custom field.

The latest i used in the webpart was:

<script type="text/javascript">
   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     OnPostRender: function(ctx) {

       var statusColors =  {
          'BP Authorized' : '#FFF1AD',  
          'Other' : '#FFD800',
          'BP Selected' : '#01DF3A' 
       };

       var rows = ctx.ListData.Row;
       for (var i=0;i<rows.length;i++)
       {
          var status = rows[i]["CATEGORY"];
          var rowId = GenerateIIDForListItem(ctx, rows[i]);
          var row = document.getElementById(rowId); 
          row.style.backgroundColor = statusColors[status];
       }
     }
   }); 
</script>

Answer 1

I think you are adding this code in wrong place.

Try following approach:

How to set the JSLink property of your Web Part:

1. Create JavaScript file with the code you are using.
2. Click on Gear icon at top right corner.
3. Edit the Page on which you have added list web part.
4. Select the list web part and edit web part properties.
5. Go to Miscellaneous --> JS Link property.
6. Add the reference to newly create file in JSLink property.

Update:

Also, try putting your code inside below block:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
    //your code goes here
});

See my answer given here.

Complete Code:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() { 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPostRender: function(ctx) {
            var statusColors =  {
                'BP Authorized' : '#FFF1AD',  
                'Other' : '#FFD800',
                'BP Selected' : '#01DF3A' 
            };
            debugger;
            var rows = ctx.ListData.Row;
            for (var i=0;i<rows.length;i++)
            {
                var status = rows[i]["CATEGORY"];
                var rowId = GenerateIIDForListItem(ctx, rows[i]);
                var row = document.getElementById(rowId); 
                row.style.backgroundColor = statusColors[status];
            }
        }
    });
});

Where CATEGORY is internal name of your choice column. You can get the correct internal name of your column by following this article: How to find the Internal name of columns in SharePoint Online?

Path:

1. Save this JSLink.js file in same site and add path to miscellaneous--> as ~site/SiteAssets/JSLink.js. OR
2. Save this JSLink.js file in same site collection and add path to miscellaneous--> as ~sitecollection/SiteAssets/JSLink.js.