2

Starting from this example:

https://code.msdn.microsoft.com/office/Client-side-rendering-code-0a786cdd

I would like to set the entire row background color depending on a column value.

2
7

Below example demonstrates how to customize List View in order to highlight list item rows.

Assume there is a Tasks list and depending on status, rows have to be highlighted using the corresponding color.

Template code:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     OnPostRender: function(ctx) {

       var statusColors =  {
          'Not Started' : '#FFF1AD',  
          'In Progress' : '#FFD800',
          'Completed' : '#01DF3A' 
       };

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

});

How to apply the changes

There are at least two options how to apply the changes:

  1. Using JSLink property
  2. Place JavaScript template on page via Script Editor/Content Editor web parts

Here is how to apply the changes using the second option:

  1. Switch the page into edit mode
  2. Add Script Editor webpart right below the list view web part.
  3. Put the specified code by wrapping it using script tag code into the Script Editor, for example: <script type="text/javascript">{Template JS code goes here}</script>
  4. Save the page

Results

enter image description here

3
  • thx, but I don't understand what is it: "clienttemplates.js" ?
    – fabio
    Jan 23 '15 at 8:25
  • Thank you for the script... it works great but if I use Quick Edit to edit the list (task list in my case) I got a type error... property 'Style' is undefined or null reference. I'll try to solve it but if someone has a solution that would be great
    – lex
    Aug 26 '15 at 9:04
  • Post Render customization fails if we use sorting or filtering. I works fine on the page load but fails afterwards. sharepoint.stackexchange.com/questions/161065/…
    – Mohit
    Nov 22 '16 at 7:43
1

You can do this by handling OnPostRender event. Something like

priorityFiledContext.OnPostRender = [
    ApplyRowOverride
];

function ApplyRowOverride(ctx) {
    for(var index = 0; index < ctx.ListData.Row.Length; index++) {
        var item = ctx.ListData.Row[index];
        if(item.Field == "WhateverValue") {
            var row = document.getElementById(GenerateIIDForListItem(ctx, item));
            if(row != null) {
                row.style.backgroundcolor = "red";
            }
        }
    }
}
2
  • thx, but where do I have to write this code? Directly inside my PriorityColorRow.js ? (PS: PriorityColorRow.js is the file I use in JS LINK)
    – fabio
    Jan 23 '15 at 8:30
  • please have a look: i.imgur.com/XyBN7QQ.png
    – fabio
    Jan 23 '15 at 8:34
0

replace 'ctx.ListData.Row.Length' by 'ctx.ListData.Row.length' in above code

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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