2

I am working with SharePoint online Task List for one of the implementations. Below is the screenshot of the same. enter image description here

I am using Below JS Snippet to highlight the tasks in Yellow for which the Due date is in past.

<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></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']);
                // 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>

I would like to know couple of things:

  1. By default when a task list is opened through a link or accessing it from site contents, it shows an expanded view of parent-child tasks. Is there a way to change it to not show expanded view by default so that way users would manually have to click on parent task to see sub tasks if any.This is important to know since i might have a situation where parent task has more than 20 sub tasks involved.

  2. Also, is it possible to highlight parent task in yellow if a sub task is overdue. For example, in screenshot shared above, child task "Test Sub" is highlighted in yellow since Due date is in past, is it possible to highlight parent task in yellow as well even though Parent task: "Task Main's due date is in future. The goal is to show parent task in yellow if any of the sub task is overdue, not sure if this is achievable technically. If its possible then please provide the solution.

Please help if someone knows an answer to this.Thanks in advance.

2

The following code for your reference.

<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>

enter image description here

  • one issue I am seeing is let's say if a task has due date in past so based on code that would be highlighted in yellow. But once user mark that task as completed then after even if the due date is in past, can we un-highlight the row? I mean in theory end users would like to make sure that once task is completed, it shouldn't be highlighted in yellow. Can you help, thanks. – mdevm Jan 20 at 20:55
  • Hi @LZ_MSFT any update on my previous comment, need your assistance please. – mdevm Jan 25 at 14:09
  • Hi, I update the code in my reply, check it. – LZ_MSFT Jan 28 at 7:17
  • I would like to change the color for text inside the highlighted row to red, do you which property is it? Thanks. – mdevm Mar 10 at 1:03

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.