0

I would like to change the backgroundColor(row) of items based on DueDate on a Task list.

2
  • what are the formatting options? i.e.green if still under the due date, red if it is past due? or any other condition
    – Waqas Sarwar MVP
    Commented Dec 12, 2018 at 16:36
  • red = overdue yellow = due in 2 days Commented Dec 12, 2018 at 17:15

2 Answers 2

0

You can use Client Side Rendering (CSR) which represents a rendering engine for list views, list forms and search results.

See my answers given below:

  1. How to color code a SharePoint list date field based on comparison with todays date?

  2. How to Highlight a Row on Active Status

0

As Ganesh's suggestion, I modified code as below based on your requirement:

<script type="text/javascript">  
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() { 

  SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
    OnPostRender: function (ctx) {
    var rows = ctx.ListData.Row;  
    for (var i = 0; i < rows.length; i++) {  
        var dueDate =new Date(rows[i]["DueDate"]); 
        var now = new Date(); 
        var rowId = GenerateIIDForListItem(ctx, rows[i]);
        var row = document.getElementById(rowId);
      // if there's no due date don't render anything
    if (dueDate == 'undefined' || !dueDate) {
        return '';
    }
    else if (dueDate < now) {
        row.style.backgroundColor ='red'  ;
    }
    else if(now-dueDate<=2) {
      row.style.backgroundColor ='yellow';
    }
    }   
    }
  });
});
</script>

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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