Highlight row based on indent level not using SharePoint Designer

Question

I would like to have a conditional formatting of the rows in my SharePoint task list table. The table contains (parent) tasks and sub-tasks.

As an example, I would like to shade the parent tasks grey and make them bold, while keeping the sub-tasks in the normal format. This should be done automatically depending on whether the line is a task or sub-task.

Is there a way to fix this? Please note that I cannot use SharePoint Designer..

Thank you very much for your help!

Answer 1

Note: The 'Predecessors' column has to be displayed in the list view for this solution to work

Create a JSLink file and link it to the task list view.

Creating and configuring JSLink can be done using below link,

Use JSLink for SharePoint Lists

The code that goes into the js file will be,

(function () {
var titleFieldCtx = {};

titleFieldCtx.Templates = {};
titleFieldCtx.Templates.Fields = {
    "LinkTitle": { //
        "View": TitleFieldViewTemplate 
    }
};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
    titleFieldCtx
);

})();

function TitleFieldViewTemplate(ctx) {

var item = ctx.CurrentItem;

//The Predecessors column has to be displayed in the view, otherwise this code fails
if(item.Predecessors.length == 0){ // if the task does not have any predecessors
    return "<b>" + item.Title +  "</b>"; //apply the necessary styling to the title
}
else{
    return item.Title;
}

}

Here is a screenshot of how the list view looks after linking the view to the JSLink file,