I'm hoping that you can help me with this issue. I've been wrestling with this one for days. I've been following everyone's posts for OnPostRender. I want to change the background color of the row based on a person field called Lead Capture. For some reason it will only change the background color of the first row. It seems as if the code leaves the loop after the first row and I can't figure out why. Thank you for your help.

    (function () { 
        var overrideCtx = {};
        overrideCtx.Templates = {};
        overrideCtx.OnPostRender = HighlightRowOverride;

        // Register the template overrides.

         var statusColors =  {
              'Jimmy' : '#8B0000',  
              'Robby' : '#ff6a00',
              'Ricky' : '#1E90FF',
              'Sally' :  '#4B0082',
              'Jane' : '#B8860B',
              'Roy' : '#FFD700',
              'Mike' : '#006400'};

    function HighlightRowOverride(ctx)
         var rows = ctx.ListData.Row;
         var i;

         for (i = 0; i < rows.length; i++) 
             var users = rows[i]["Lead_x0020_Capture"];
             var curUserName = users[i].title;
             var status = curUserName; 
             var rowId = GenerateIIDForListItem(ctx, rows[i]);
             var row = document.getElementById(rowId); 

             if (row != null)
                  row.style.backgroundColor = statusColors[status];
  • What value do you get if you alert rows.length?
    – Erin L
    Sep 7, 2016 at 22:23
  • I get 38. I also put an empty alert after the loop and it does not fire.
    – HarryT
    Sep 7, 2016 at 22:41
  • Then it sounds like there's an error in the loop. Does anything show up in the console (F12)?
    – Erin L
    Sep 8, 2016 at 19:40

3 Answers 3


The error is probably in the line

var curUserName = users[i].title;

since you are using the loop index (which is incrementing based on the number of rows) to index into the users user field array.

Since my guess is you only have one user per Lead_x0020_Capture field, all users arrays will only have index 0, so by the time you get to the second row (index 1), you will get an "index out of range" error when you try to access the user title there.


var curUserName = users[0].title;



Add a debugger; just above the for loop and press F10 to step through the code. You should be able to spot the place where the loop breaks. F11 will step into a function, if needed. A try/catch may help too.


Your code is probably erroring out inside the loop and the error is caught my MS code and not outputted to the console?

wrap your loop in your own own error handler, using debugger is a slow step-by-step proces:

  //your for loop

And see what shows up in F12

Better is to simplify your code; ditch the for loop and use a modern forEach see: Color Row if Date in column = Sysdate in SharePoint Foundation 2013 using CSR


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.