How to update SPO task list in case of below requirements

Question

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

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.

Answer 1

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>