Color code due date field

Question

I have modified the following script to display my ReminderDate field in red if the date is past and also the feedback field is false.

Before implementing this and because I am a novice in jslink/javascript can anyone validate this code?

(function () {
    var statusFieldCtx = {};

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

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





function ColorCodeDueDate(ctx) {

var _feedbackValue = ctx.CurrentItem.FeedbackReceived;
var dueDate = new Date(ctx.CurrentItem.ReminderDate);
var now = new Date();



// if there's no due date don't render anything
if (dueDate == 'undefined' || !dueDate) {
        return '';
    }
    else if (dueDate <now && _feedbackValue == false) {  
        return "<div style='color:red'>" + dueDate.toLocaleDateString('en-GB') + "</div>";
    }
    else {  
        return "<div>" + dueDate.toLocaleDateString('en-GB') + "</div>";
    }
}

What makes you feel you can not validate it yourself by acutally trying it? — Robert Lindgren, May 25 '16 at 13:33
+1 to @RobertLindgren 's comment -- just give it a shot and see if it works! It's just JavaScript, you're not going to break anything. ;) — Dylan Cristy, May 25 '16 at 13:41
just tried now, but the items where the ReminderDate field is in the past and the feedback field is false do NOT show in red. — Luis Carvalho, May 25 '16 at 13:43
@Dylan Cristy the FeedBackReceived is a bolean type field, is it correct for me to use the comparison _feedbackValue == false ? — Luis Carvalho, May 25 '16 at 13:50
Honestly, off the top of my head I do not remember. I would open up the developer tools for whatever browser you are using, set a breakpoint in your code, refresh the page, and when it stops on your breakpoint, inspect the ctx.CurrentItem object to see what that value really is and how you can work with it. Also, at a quick glance, the way you have written your code implies that the internal name of the "feedback" field is feedback - starting with a lower case "f". Is that really the case? — Dylan Cristy, May 25 '16 at 13:58
That was a typo. I have corrected the pasted code. the field is actually called "FeedbackReceived" — Luis Carvalho, May 25 '16 at 14:43

score 2 · Answer 1 · edited Jun 15 '20 at 08:48

Use a Chrome Browser and the Cisar Extension to make CSR development a breeze with Live Editing in the browser.

If you want to develop less CSR code, take a peek at iCSR.GitHub.io

You can check all available rows/fields in a displayed View by executing (in the F12 console)

ctx.ListData.Row.forEach((row)=>{console.dir(row)})

And learn all about String.format (Changing date format using javascript) which you can also use to format any string. It will save you lines of code when you use that Cisar Extension

Update #1

Issue with CSR is that you need the fields you reference IN the View. So you can not create a View without your ReminderDate and the FeedbackReceived fields.

Unless.. you put your logic in a Calculated Column Due and display that field in the View

=IF(FeedbackReceived , IF(ReminderDate,ReminderDate,"") , "")

the second IF is needed to catch empty dates

You can then simplify your CSR code.

Or, when using the iCSR.GitHub.io library, have a CSR file with only:

iCSR.Me({
  file: "~siteCollection/Style Library/csr_due.js",
  Fields: {
    Due:{
      View:iCSR.DueDate({
        colors:['pink','lightgreen'],
        range:[0],
        colortag:'TR'
      })
    }
  }
});

the hardcoded file reference is needed to make it work in MDS (Minimal Download Strategy) enabled sites

iCSR

score 0 · Answer 2 · answered May 25 '16 at 15:10

I tweaked a code I am using (embedded in a JSLink) here

(function () {
    var statusFieldCtx = {};

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

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





function ColorCodeDueDate(ctx) {



    var _feedbackValue = ctx.CurrentItem.FeedbackReceived;
    var dueDate = new Date(ctx.CurrentItem.ReminderDate);
    var now = new Date();
    var timeDiff = Math.abs(dueDate.getTime() - now.getTime());
    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 

    var contractExpiryHTML="";
        // Return html element with appropriate color based on ....
        // You just need to add the check to feedback variable
        if(diffDays > 60){
             contractExpiryHTML= "<span style='color :#238C00'>" + ReminderDate + "</span>"; 
        }
        if(diffDays <=60 && diffDays > 30){
             contractExpiryHTML= "<span style='color :#FFB300;'>" + ReminderDate + "</span>"; 
        }
        if (diffDays <=30){
             contractExpiryHTML= "<span style='color :#ff0000;'>" + ReminderDate + "</span>"; 
        }

        if (date1 > date2){
             contractExpiryHTML= "<span style='color :#8000FF;font-style: italic;'>" + ReminderDate + "</span>";
        }

        return contractExpiryHTML;

    }

Color code due date field

2 Answers2

Update #1

Linked