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:

Ganesh Sanap - MVP · Answer 1 · 2018-12-17T02:12:19.540

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:

SharePoint 2013 Client Side Rendering: List Views.

Thanks Ganesh, the code works the only change I did for my scenario was if itemDate <= today since I want to highlight rows for which the expiration date is in the past. One thing i noticed is for one of the rows in the list, expiration date was not populated so I did list->quick edit and populated expiration date in the past, after clicking on stop editing it shows errors for which I have added screenshot in my question description, please check. Once the page is reloaded then it shows items highlighted in red, see screenshot for the same in question description. — mdevm, Dec 16 '18 at 20:50
Updated the answer. Please check, accept and upvote if this answer helped you in any way. — Ganesh Sanap - MVP, Dec 17 '18 at 02:13
Thanks Ganesh. Unfortunately the code is not working. Even its not showing the rows in red for which the expiration date is in the past. — mdevm, Dec 17 '18 at 14:33

score 1 · Accepted Answer · answered Dec 17 '18 at 01:46

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>

How to highlight the row in red if expiration date is passed for SharePoint 2013 list

2 Answers2

Linked