I have implemented in one of my
previous project using below script.
Where we want to keep the background color of status field based on the
value of Status and DueDate Field.(function () {
// Create object that have the context information about the field that we want to change it's output render
var statusFiledContext = {};
statusFiledContext.Templates = {};
statusFiledContext.Templates.Fields = {
// Apply the new rendering for status field on List View
"Status": { "View": statusFiledTemplate },
"DueDate": { "View": dueDateFiledTemplate }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFiledContext);
})();
// This function provides the rendering logic for list view
function statusFiledTemplate(ctx) {
var status = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
switch (status) {
case "Not Started":
return "<span style='background-color :rgb(186, 20, 26); color :WhiteSmoke; -moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px; padding-right: 5px;padding-left: 5px' >" + status + "</span>";
break;
case "In Progress":
return "<span style='background-color :rgb(252, 209, 22);-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px; padding-right: 5px;padding-left: 5px'>" + status + "</span>";
break;
case "N/A":
return "<span style='background-color :rgb(210, 210, 210);-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px; padding-right: 5px;padding-left: 5px'>" + status + "</span>";
case "Completed":
return "<span style='background-color :rgb(85, 212, 85);-moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px; padding-right: 5px;padding-left: 5px'>" + status + "</span>";
}
}
function dueDateFiledTemplate(ctx) {
var duedate = ctx.CurrentItem.DueDate;
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
var today_date = month+"/"+day+"/"+year;
var firstValue = duedate.split('/');
var secondValue = today_date.split('/');
var dueDate = new Date();
dueDate.setFullYear(firstValue[2],(firstValue[0] - 1 ),firstValue[1]);
var todayDate = new Date();
todayDate.setFullYear(secondValue[2],(secondValue[0] - 1 ),secondValue[1]);
var status = ctx.CurrentItem.Status;
if (dueDate < todayDate && (status == "Not Started" || status == "In Progress"))
{
return "<span style='background-color :rgb(186, 20, 26); color :WhiteSmoke ; -moz-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px; padding-right: 5px;padding-left: 5px'>" + duedate + "</span>";
}
else
{
return duedate;
}
}
No comments:
Post a Comment