3

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>";
    }
}
  • 2
    What makes you feel you can not validate it yourself by acutally trying it? – Robert Lindgren May 25 '16 at 13:33
  • What is the issue you are facing? – Amal Hashim May 25 '16 at 13:34
  • +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
2

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

0

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;

    }

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.