2

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: enter image description here

after the page is reloaded, then it shows list view properly: enter image description here

1

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>

enter image description here

1

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:

  1. 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 Dec 17 '18 at 2: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
  • Add breakpoints in code and try to debug the code. – Ganesh Sanap Dec 17 '18 at 14:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.