Mar 12 2021 02:56 PM - edited Mar 12 2021 03:00 PM
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>
Mar 15 2021 05:10 AM
SolutionNot 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!
Mar 15 2021 10:05 AM
Mar 15 2021 10:10 AM
Mar 15 2021 12:58 PM
Mar 15 2021 01:01 PM
Apr 25 2021 09:24 PM
Mar 15 2021 05:10 AM
SolutionNot 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!