Color Code SharePoint List cell based on Due Date and Status columns

[Joseph_Butler]

I am using the Javascript (at the bottom) on my SP 2013 site to color code a Due Date field.

This code as written, does just that.

However, if the Status column for the list item is set to Completed, then the Due Date field should not have color..

What can I do to not add color to the Due Date field if there is no Due Date entered or if the Status column is set to Completed.

The below code works for setting the Due Date colors:

<script type="text/javascript">  
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", 
function () {
    var statusFieldCtx = {};

    statusFieldCtx.Templates = {};
    statusFieldCtx.Templates.Fields = {
    //internal column name between double quotes on the next line. If your column name has a space in its internal name use "_x0020_" in place of the space. 
        "DueDate": {
            "View": ColorCodeDueDate
            }
    };

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

function ColorCodeDueDate(ctx) {
    //update internal column name at the end of the next line
    var MyDateVar = new Date(ctx.CurrentItem.DueDate);
    MyDateVar.setHours(0,0,0,0);
   
    var today = new Date();
    today.setHours(0,0,0,0);

    var then1 = new Date();
    //use this to set how many days you want var then to be.
    then1.setHours(0,0,0,0);
    then1.setDate(then1.getDate() + 1);

    var then14 = new Date();
    then14.setHours(0,0,0,0);
    //use this to set how many days you want var then to be.
    then14.setDate(then14.getDate() + 14);

    var then15 = new Date();
    then15.setHours(0,0,0,0);
    //use this to set how many days you want var then to be.
    then15.setDate(then15.getDate() + 15);

    // if there's no due date don't render anything. Also update the column names in the else statements below. If your column name has a space in its internal name use "_x0020_" in place of the space.
    if (MyDateVar <= today) {
        return "<div style='background-color:red;color:white'>" + ctx.CurrentItem.DueDate + "</div>";
    }
    else if (MyDateVar.getTime() >= then1.getTime() && MyDateVar.getTime() <= then14.getTime()) { 
        return "<div style='background-color:yellow;color:black'>" + ctx.CurrentItem.DueDate + "</div>";
    }
    else if (MyDateVar >= then15) {  
        return "<div style='background-color:green;color:white'>" + ctx.CurrentItem.DueDate + "</div>";
    }
}
</script>

[#2 · Accepted solution]

@Joseph_Butler 

Not sure if this is exactly what you need. You should be able to modify where this code is located.

Before the first line of code in your, add the following.

if (!ctx.CurrentItem.DueDate || ctx.CurrentItem.Status.toLowerCase() === "completed") return;

This checks if the DueDate exists and then if the Status = Complete. If either condition is true, the function exits (return;)

If this works for you, please mark this response as the answer. Thanks!

[#3]

The code provided removes the date from the Due Date field., so I updated it with the color:

if (!ctx.CurrentItem.DueDate || ctx.CurrentItem.Status.toLowerCase() === "completed")
return "<div style='background-color:white;color:black'>" + ctx.CurrentItem.DueDate + "</div>";

[#4]

===? never seen that before.

[#5]

This explains the difference:
https://howtodoinjava.com/javascript/javascript-equality-vs-identity-operators/
They both work in this case, but === removed the implicit typing step since we know both values are strings.

[#6]

Sounds good. That's why I said in my answer that I wasn't exactly sure where you needed the code to go. The important part was the comparison piece and I was counting on you to adjust as needed.

Glad you got it working!

[#7]

Worked for me for formatting