0

So I was tasked with creating a conditional to highlight an item red when the date is overdue. With some help from you guys I was able to produce a JSLink that highlighted the entire row when an item was overdue. I was wondering if it was possible to modify this code so that it only highlighted the cell and not the entire row. Thanks for your help!

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

overrideCtx.OnPostRender = [
HighlightRowOverride
];
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function HighlightRowOverride(inCtx) {
 //for each item (row)
 for (var i = 0; i < inCtx.ListData.Row.length; ++i) {
 var listItem = inCtx.ListData.Row[i];

var iid = GenerateIIDForListItem(inCtx, listItem);
var row = document.getElementById(iid);

var date = new Date(listItem.Date);
date.setHours(0,0,0,0);

todaysDate = new Date();
todaysDate.setHours(0,0,0,0);


if (date.getTime() > todaysDate.getTime()) {
  if (row != null)
    row.style.backgroundColor = "rgba(255, 0, 0, 0.5)"; //red
}
}

  inCtx.skipNextAnimation = true;
}

jsfiddle: https://jsfiddle.net/vqfj6xff/

0

You can certainly override only the field. You should probably check out this article on Client Side Rendering, it's a great resource and helps explain a lot of what you can do:

SharePoint 2013 Client Side Rendering: List Views

In your particular case, you would want to modify your code to be something like this:

(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = {
        YourDateField: {
            View: HighlightDate
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function HighlightDate(inCtx) {

    var date = new Date(inCtx.CurrentItem.YourDateField);
    date.setHours(0, 0, 0, 0);

    todaysDate = new Date();
    todaysDate.setHours(0, 0, 0, 0);

    var returnHTML = '<div'; // notice we leave the div open because we might be adding a style to it

    if (date.getTime() > todaysDate.getTime()) {
        returnHTML += ' style="background-color:rgba(255, 0, 0, 0.5);"';
    }

    // whether or not we did add the conditional formatting,
    // we still have to return the actual date value
    // or the cell will be blank
    returnHTML += '>' + date.toLocaleDateString() + '</div>';

    return returnHTML;
}

Obviously, the two places I have used YourDateField should be replaced with the actual internal name of the date field you want to override.

Keep in mind that when you override a single field, you are responsible for returning the HTML that will appear in the table cell for that field, so if you want your users to see the value of that field, you have to be sure to get it and do something with it to make it visible.

In this case I have used date.toLocaleString() to format the date, but you can choose to format it in any way you like.

  • Thank you for your response! The logic seems sound here and I tried to implement it myself and I cannot get it to work if my life depended on it! When I ran it originally nothing seemed to happen so I did a few modifications. Some notes: My field name is simply "Date" I added a semi colon after override field declaration I added a semi colon at the last return statement "return returnHTML;" I added an alert at the start of the HighlightDate function and that won't go off Let me know if you can spot the (probably simple) error! JSFiddle: jsfiddle.net/g2d9aqzr – iamthehxc Oct 5 '16 at 13:51
  • @iamthehxc sorry about that. I fixed the bug - I had not added the Fields to overrideCtx.Templates, I added it directly on overrideCtx, which is wrong. I have updated my answer to reflect the fix (and added the semicolons you pointed out were missing, thx). – Dylan Cristy Oct 5 '16 at 14:09

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.