How to highlight the row in red if expiration date is passed for SharePoint 2013 list
Question
I am working with SharePoint 2013. In one of the lists, I have a date column called "Contract Expiration Date" (Internal name: ContractExpirationDate) which contains a date value.
what I want do is may be by adding some JS, I want to highlight the row in red if the date is in past (less than today's date) and if a user comes in and update the date value to show it in future then the row should no longer be remain highlighted.
Can someone please suggest a JS solution that works. Thanks.
Error after clicking on stop editing this list:
after the page is reloaded, then it shows list view properly:
La solution
We can use the following JSLINK code to achieve it, add the code below into script editor web part in the list view.
<script type="text/javascript">
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function (ctx) {
// get today's date
var today = new Date();
// zero out the time portion so we will only compare days
today.setHours(0,0,0,0);
var rows = ctx.ListData.Row;
for (var i = 0; i < rows.length; i++) {
// get the date set in your date YourDateField
var itemDate = new Date(rows[i]['ContractExpirationDate']);
// zero out the time portion so we only compare days
itemDate.setHours(0,0,0,0);
var rowId = GenerateIIDForListItem(ctx, rows[i]);
var row = document.getElementById(rowId);
if (row!=null&&itemDate <= today) {
row.style.backgroundColor = '#FF0000';
}
}
}
});
});
</script>
Autres conseils
You can use Client Side Rendering (CSR) which represents a rendering engine for list views, list forms and search results. I would recommend you to consider the following approach for your task.
Below example demonstrates how to highlight list rows based on their date values:
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function (ctx) {
// get today's date
var today = new Date();
// zero out the time portion so we will only compare days
today.setHours(0,0,0,0);
var rows = ctx.ListData.Row;
for (var i = 0; i < rows.length; i++) {
// get the date set in your date YourDateField
var itemDate = new Date(rows[i]['ExpirationDate']);
// zero out the time portion so we only compare days
itemDate.setHours(0,0,0,0);
var rowId = GenerateIIDForListItem(ctx, rows[i]);
var row = document.getElementById(rowId);
if (row && itemDate <= today) {
row.style.backgroundColor = '#FF0000';
}
}
}
});
});
For more clarification and how to add this code in JSLink of list view, see my answer How to Highlight a Row on Active Status.
Source: