1

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>
5
  • Are using SharePoint Online/2016/2013 or anything else? Jul 12, 2019 at 9:36
  • Where are you adding this code? You need to add this in JSLink property of List web part. Jul 12, 2019 at 9:40
  • It is Sharepoint 2013. I am adding it as web part underneath the list in the page layout.
    – Daniel
    Jul 12, 2019 at 11:10
  • Are you positive that CATEGORY (exactly that, in all caps) is the internal name of the column? Also, what type of column is it? I created a test list, added a choice column with that exact internal name, with those exact choice values, and added your code as-is through a content editor web part below the LVWP (just as you describe), and your code works fine. The only things I can think of are if you don't have the column internal name right, or if it is a lookup or some other type of column and the column values are not the strings you are expecting. Jul 12, 2019 at 15:41
  • I am pretty sure it is CATEOGRY - It is as custom column with a type choice.
    – Daniel
    Jul 15, 2019 at 7:11

1 Answer 1

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.
10
  • I was under the impression that both doing it as a web part or as a JSLink. Will try the JSLink and get back.
    – Daniel
    Jul 12, 2019 at 11:11
  • Added the Code to a ".js" and put it in SiteAssets. Made a link under misc to ~SiteAssets/Filename.js, but still without luck
    – Daniel
    Jul 12, 2019 at 11:21
  • @Daniel the URL tokens you can use are ~sitecollection or ~site, not ~SiteAssets. The path in your JSLink should be ~site/SiteAssets/Filename.js. Jul 12, 2019 at 13:58
  • Updated the link to match. Made no changes to appearance.
    – Daniel
    Jul 15, 2019 at 7:13
  • Have you added SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() { block to make sure clienttemplates.js file is loaded? Are you sure field's internal name is CATEGORY? Jul 15, 2019 at 7:34

Your Answer

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

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