How would I color code text in a column when an overdue date threshold is reached?
I created a calculated column (# days overdue) that shows total number of days the item has been open. When the # days overdue is greater than 30 days an exclamation mark (!) appears in the alert column. How would I change the color of the exclamation mark to red?
Thank you.
If the exclamation mark is the only thing that's in the Alert column then you could simply add the following CSS to a Script or Content Editor Web Part on your page:
.ms-listviewtable > tbody > tr > td:nth-child(4){
color: red;
}
You might have to change the number in nth-child(4) to address the right column.
If the Alert column can contain different values and only an exclamation mark shall be colored red then you need a more sophisticated solution. The following JSLink code should get you started:
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
function getBaseHtml(ctx) {
return SPClientTemplates["_defaultTemplates"].Fields.default.all.all[ctx.CurrentFieldSchema.FieldType][ctx.BaseViewID](ctx);
}
function init() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
Templates: {
Fields: {
"Alert": {
View: function(ctx) {
if (ctx.CurrentItem["Alert"] == "!") {
return "<font color='red'>" + ctx.CurrentItem["Alert"] + "</font>";
} else {
return ctx.CurrentItem["Alert"];
}
}
}
},
},
ListTemplateType: 100
});
}
RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/colorAlertColumn.js"), init);
init();
});
Here is an excellent article about CSR and how to implement it: SharePoint 2013 Client Side Rendering: List Views
