1

Rusty on JS and could use a sharp eye to see what I'm missing.

Have tried both recommendations for JS formats for color coding rows and can't get either to work.

  • Added to the Misc JS Link field of the WebPart of the view I'd like to color code
  • Uploaded to my scripts folder
  • New column is called LiveDate; need to highlight any future dates
  • Using SP 2013

Path used to point to JS file: ~SiteAssets/Scripts/targetingcolor2.js

JS code attempt #1:

var rightNow = new Date(); // rightNow has the date and time value of the moment it was created

function colorCodeRows() {

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

        // get today's date
        var today = new Date();
        // zero out the time portion so we will only compare days
        today.setHours(0,0,0,0);

        var rows = ctx.ListData.Row;
        for (var i = 0; i < rows.length; i++) {

            // get the date set in your date YourDateField
            var itemDate = new Date(rows[i]['LiveDate']);
            // zero out the time portion so we only compare days
            itemDate.setHours(0,0,0,0);

            var rowId = GenerateIIDForListItem(ctx, rows[i]);
            var row = document.getElementById(rowId);

            if (itemDate >= today) {
                row.style.backgroundColor = '#FFFFE0';
            }
        }
    }
});
}
RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens('~SiteAssets/Scripts/targetingcolor.js'), colorCodeRows);
colorCodeRows();

JS Code Attempt #2:

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

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

    // get today's date
        var today = new Date();
        // zero out the time portion so we will only compare days
        today.setHours(0,0,0,0);
   };

   var rows = ctx.ListData.Row;
   for (var i = 0; i < rows.length; i++)
   {
      // get the date set in your date YourDateField
            var itemDate = new Date(rows[i]['LiveDate']);
            // zero out the time portion so we only compare days
            itemDate.setHours(0,0,0,0);

            var rowId = GenerateIIDForListItem(ctx, rows[i]);
            var row = document.getElementById(rowId);

            if (itemDate >= today) {
                row.style.backgroundColor = '#FFFFE0';
   }
 }
}); 
});

Any help would be appreciated!

2
  • In Settings > Site Settings > Manage Site Features do you have "Minimal Download Strategy" disabled?
    – Chris G
    Feb 13, 2018 at 17:00
  • Chris G - it was enabled. I disabled it but that didn't fix the issue unfortunately :-/
    – CinderGirl
    Feb 16, 2018 at 20:26

1 Answer 1

0

I know of a work around but it's a little bit messy. It uses a workflow to apply CSS to the rows. I can go into more detail if you think this is suitable for your needs but if you want to stick to the JS method I'm sure someone will be able to help.

Kind regards

2
  • 1
    Thanks. Appreciate the offer but want to steer away from using workflows. They can be a bit buggy in our org. :-/
    – CinderGirl
    Feb 16, 2018 at 20:23
  • No problem :) I hope you mange to resolve this issue.
    – Kirito
    Feb 20, 2018 at 14:18

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.