1

In SharePoint online task list, I am using below code to highlight a row in yellow if task is overdue:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<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]['DueDate']);
                var checkMark=rows[i]['Checkmark'];
                // 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&&checkMark=="No") {                
                    row.style.backgroundColor = 'yellow';
                    var itemId=rowId.split(',')[1];
                    var parentRowId=rowId.split(',')[0]+","+getParentTaskId(ctx.ListTitle,itemId)+","+rowId.split(',')[2];                  
                    var parentRow=document.getElementById(parentRowId);
                    parentRow.style.backgroundColor = 'yellow';              
                }
            }
        }
    });
});
function doCollapseTaskList() {
    $(".ms-commentcollapse-iconouter > img").each(function(){
        $(this).click();
    });
}
$(function () {
      ExecuteOrDelayUntilScriptLoaded(function () {
          if (typeof asyncDeltaManager != "undefined")
            asyncDeltaManager.add_endRequest(doCollapseTaskList);
          else doCollapseTaskList();
      }, "init.js");
});
function getParentTaskId(listTitle,taskId){
    var id=taskId;
    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+listTitle+"')/items("+taskId+")?$select=ParentID/Id&$expand=ParentID",
        method: "GET",
        async:false,
        headers: { "Accept": "application/json; odata=verbose" },
        success: function(data){
            taskId=data.d.ParentID.Id;
        }
    });
    if(taskId!=undefined){
        return getParentTaskId(listTitle,taskId);
    }else{
        return id;
    }
}
</script>

Below is the image for your information.

In addition to background color, I would like to highlight the font color as well of text "Task Main' , Due Date value:1/16/2019, which property should I use? Any help is appreciated.

enter image description here

P.S: I got this answer from sp stack exchange only but not getting further response on that thread so had to post this as a separate question.

0

Try adding

row.style.backgroundColor = 'red';
parentRow.style.color = 'red';

After below line:

parentRow.style.backgroundColor = 'yellow'; 

Update:

try adding below code:

var jRow = $(row);

And add red-color class if task is overdue, inside if (row!=null&&itemDate <= today&&checkMark=="No") block:

jRow.addClass("red-color");

After this:

var row = document.getElementById(rowId);

Also add below CSS in your custom CSS file:

.red-color, .red-color > p, .red-color > span, .red-color > td, .red-color > a {
    color: red !important;
}

Only problem in this code is you need to add all elements in CSS selector as SharePoint list shows data in table, td's and inner elements like span, a, p, etc. inside td.

  • If it is not working then let me know. Also, as you are not sharepoint online are you comfortable with using modern experience? Because styling is more easy in modern experience using JSON formatting. – Ganesh Sanap Mar 12 at 2:03
  • it does not work. – mdevm Mar 12 at 2:12
  • Also try adding row.style.backgroundColor = 'red'; – Ganesh Sanap Mar 12 at 2:44
  • Even if this is not working, then you can add class to your tr row using jquery's addClass() function and write css for that class using !important. – Ganesh Sanap Mar 12 at 2:55
  • the alternative you suggested does not work as well, can you share snippet for jquery approach u mentioned. – mdevm Mar 12 at 11:07

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.