Custom Lists - Conditional Formatting Cells based on Dates on SharePoint2013

Question

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/

Answer 1

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.