2

I have this specific requirement to color code the due date field if it's value is less than 180 days (6 months) compared to today's date.

Is this possible with Javascript/JSLink ?

Thanks

2

Yes absolutely. Here's a quick code example that I mostly borrowed from here:

(function () {
    var statusFieldCtx = {};

    statusFieldCtx.Templates = {};
    statusFieldCtx.Templates.Fields = {
        "DueDate": {
            "View": ColorCodeDueDate
            }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx);
})();

function ColorCodeDueDate(ctx) {
    var dueDate = new Date(ctx.CurrentItem.DueDate);

    var now = new Date();
    var then = new Date();
    then.setDate(now.getDate() + 180);

    // if there's no due date don't render anything
    if (dueDate == 'undefined' || !dueDate) {
        return '';
    }
    else if (dueDate >= now && dueDate <= then) { // we are within 180 days
        return "<div style='background-color:red;color:white'>" + dueDate.toLocaleDateString() + "</div>";
    }
    else {  // we are outside of 180 days
        return "<div>" + dueDate.toLocaleDateString() + "</div>";
    }
}

If your field's internal name is "MaxEndDate", change the line

"DueDate:" {

to

"MaxEndDate": {

and then change the line

var dueDate = new Date(ctx.CurrentItem.DueDate);

to

var dueDate = new Date(ctx.CurrentItem.MaxEndDate);

The color is just defined using the inline CSS style of the div markup you are returning. In the code example above, I am returning a div with a red background and white text. If all you need is red text on the default background, you would do something like

return "<div style='color:red'>" + dueDate.toLocaleDateString() + "</div";
  • The color should be RED if the value is within 180 days, i.e 179 days. what piece in the code do I need to modify? my field is actually named "MaxEndDate" – Luis Carvalho Mar 1 '16 at 17:20
  • 1
    this section, style='background-color:red;color:white' gives you white text on a red backgroud, if you just want red text, then do color:red – Eric Alexander Mar 1 '16 at 17:38
  • @Eric Alexander. to target my field "MaxEndDate", do I only replace "DueDate" in statusFieldCtx.Templates.Fields section ? I read somewhere that this where the field is set for manipulation. – Luis Carvalho Mar 1 '16 at 17:50
  • @LuisCarvalho please see my update, you need to reference your real field name in two places. – Dylan Cristy Mar 1 '16 at 17:51
  • @Dylan Cristy , for some reason the MaxEnddate is now incorrectly formating the date. the format should be DD/MM/YYYY. if I edit the field value, the format is changed to MM/DD/YYYY. Any idea why this is happening? – Luis Carvalho Mar 2 '16 at 13:47
1

I whipped this up quick, works on a standard Task List.

function ColorCodeDueDate(ctx) {
  var fieldname=ctx.CurrentFieldSchema.RealFieldName,
      datevalue=new Date(ctx.CurrentItem[fieldname]),
      days=GetDaysAfterToday(datevalue);
  if (!days) return 'No '+fieldname;
  if (days<5) style="background-color:red;color:white";
  if (days<-30) style="background-color:green;color:white";
  return String.format("<div style='{0}'>{1} days from {2:dd/MM/yyyy}</div>",style,days,datevalue);
}

Notes:

  • Use the Chrome Extension Cisar (by Andrei Markeev) to code CSR files.
  • Should be easy to spot how to change it to your 180 days
  • Do not hardcode internal fieldnames; this function can be applied to any DateTime field
  • Try to code with only one exit point (return) in your functions; makes it a lot easier to read
  • GetDaysAfterToday() comes from SharePoints own sp.datetimeutil.js library, but you might have to load it as extra JSLink first; because SP loads it after your CSR code executes
    (OR copy that function code into your own CSR file)
  • String.format() comes from SharePoints msajaxbundle.js; which is loaded before your CSR code executes

With the https://iCSR.github.io Library you do not have to write a function at all

If you declare the View as:

'MaxEndDate':{
  View : iCSR.DueDate({
                        ranges:'[msRed],0,#FFF1AD,90,[msGreen]'
                        ,rowcolor:true
                        })
}

You get this: (screenshot from another post)

  • msRed and msGreen are iCSR tokens matching the colors from the new Microsoft Planner
  • iCSR adjusts the textcolor contrast for you (on each cell, you can't set a textcolor on a TR row)
  • and more

  • this is still messing my dates. unless I change my locale to English US, which defeats the purpose. – Luis Carvalho Mar 4 '16 at 9:04

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.