I am using SharePoint 2016. There is a Submittal library that has been created and one of the users would like the "Due Date" column to highlight in yellow when a document that has been submitted is open and past due (see image). I am new to Javascript and would like a step by step on how to do this. I am familiar with creating web parts, I guess I just haven't found the correct code to enter. Please help!

enter image description here

  • What you are trying to do is do-able, but a quicker path to a functional result given your lack of experience with JavaScript is to create two filtered views, one that only displays the items that are past the due date and another one that displays everything that is not past due date. Although using client side rendering (JavaScript) would also work, but another problem arises: what happens if it breaks for some reason and you have to fix it? – A.k.A. Fritz Apr 12 '19 at 0:45

Add the code below into a script editor web part in list view page.

<script type="text/javascript">
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
        OnPostRender: function(ctx) {
            var today = new Date();
            // zero out the time portion so we will only compare days
            var rows = ctx.ListData.Row;
            for (var i=0;i<rows.length;i++){
                var status = rows[i]["Status"];
                var dateDue= new Date(rows[i]["Date_x0020_Due"]);
                var rowId = GenerateIIDForListItem(ctx, rows[i]);
                var row = document.getElementById(rowId);
                    row.style.backgroundColor = "yellow";

enter image description here

| improve this answer | |

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.