How to modify the Task Name Column using JSLink in Sharepoint 2013 - sharepoint-2013

Question

I am trying to modify the color of SharePoint 2013's Task Name column in a list using JSLink. I can override every other column using this code:
var overrideCtx = {
Templates: {
Fields: {
‘Title': {‘View’ : taskSample.TitleRendering },
‘PercentComplete': {‘View’ : taskSample.PercentCompleteRendering}
}
}
};
For some reason when I debug the code in Google Chrome the TitleRendering function is always skipped, while the PercentCompleteRendering function is executed fine.
Does anyone have any insight into this issue?
Thanks
I have tried the suggestion of LinkTitle in the answers below; it did not resolve my issue. I am including all my code for review. Any other suggestions?
var taskSample = taskSample || {};
taskSample.CustomizeFieldRendering = function () {
RegisterSod('hierarchytaskslist.js', '/_layouts/15/hierarchytaskslist.js');
LoadSodByKey('hierarchytaskslist.js', null);
debugger;
// Intialize the variables for overrides objects
var overrideCtx = {
Templates: {
Fields: {
'Unit': {
'View' : taskSample.UnitRendering
},
'LinkTitle': {
'View' : taskSample.TitleRendering
},
'PercentComplete': {
'View' : taskSample.PercentCompleteRendering
}
}
}
};
// Register the override of the field
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
}
taskSample.PercentCompleteRendering = function (ctx) {
debugger;
var output = [];
var _dueDate = new Date(ctx.CurrentItem.DueDate);
var _now = new Date();
var nowPlus = new Date();
nowPlus.setDate(_now.getDate()+7);
output.push('<div style="background: #dbdbdb; display:block; height: 20px; width: 150px;">');
if ((_dueDate >= _now && _dueDate <= nowPlus)&& (ctx.CurrentItem.PercentComplete.replace(" %", "") === "0") ) {
output.push('<span style="color: #dbc900; font-weight: bold; position:absolute; text-align: center; width: 150px;">');
}
else if ((_dueDate < _now)&& (ctx.CurrentItem.PercentComplete.replace(" %", "") === "0") ) {
output.push('<span style="color: #CC0000; font-weight: bold; position:absolute; text-align: center; width: 150px;">');
}
else{
output.push('<span style="color: #fff; font-weight: bold; position:absolute; text-align: center; width: 150px;">');
}
output.push(ctx.CurrentItem.PercentComplete);
output.push('</span>');
output.push('<div style="height: 100%; width: ');
if (_dueDate == 'Invalid Date') {
output.push(ctx.CurrentItem.PercentComplete.replace(" %", "") + '%; background: #757575;'); //grey
}
else if (ctx.CurrentItem.PercentComplete.replace(" %", "") === "100") {
output.push(ctx.CurrentItem.PercentComplete.replace(" %", "") + '%; background: #339900;'); //gree
}
else if (_dueDate < _now) {
output.push(ctx.CurrentItem.PercentComplete.replace(" %", "") + '%; background: #CC0000;'); //red
}
else if (_dueDate >= _now && _dueDate <= nowPlus) {
output.push(ctx.CurrentItem.PercentComplete.replace(" %", "") + '%; background: #dbc900;'); //yellow
}
else if (_dueDate > _now) {
output.push(ctx.CurrentItem.PercentComplete.replace(" %", "") + '%; background: #339900;'); //green
}
output.push('"></div></div>');
return output.join('');
}
taskSample.UnitRendering = function (ctx) {
debugger;
var output = [];
var _Unit = ctx.CurrentItem.Unit;
switch(_Unit) {
case "Unit 1":
output.push('<span style="color: DarkMagenta;">');
output.push(ctx.CurrentItem.Unit);
output.push('</span>');
break;
case "Unit 2":
output.push('<span style="color: DarkRed;">');
output.push(ctx.CurrentItem.Unit);
output.push('</span>');
break;
case "Unit 3":
output.push('<span style="color: MidnightBlue;">');
output.push(ctx.CurrentItem.Unit);
output.push('</span>');
break;
case "Unit 4":
output.push('<span style="color: DarkOliveGreen ;">');
output.push(ctx.CurrentItem.Unit);
output.push('</span>');
break;
case "Unit 5":
output.push('<span style="color: GoldenRod;">');
output.push(ctx.CurrentItem.Unit);
output.push('</span>');
break;
case "Unit 6":
output.push('<span style="color: Coral;">');
output.push(ctx.CurrentItem.Unit);
output.push('</span>');
break;
default:
output.push(ctx.CurrentItem.Unit);
break;
}
return output.join('');
}
taskSample.TitleRendering = function (ctx) {
debugger;
var output = [];
var _Unit = ctx.CurrentItem.Unit;
switch(_Unit) {
case "Unit 1":
output.push('<span style="color: DarkMagenta;">');
output.push(ctx.CurrentItem.Title);
output.push('</span>');
break;
case "Unit 2":
output.push('<span style="color: DarkRed;">');
output.push(ctx.CurrentItem.Title);
output.push('</span>');
break;
case "Unit 3":
output.push('<span style="color: MidnightBlue;">');
output.push(ctx.CurrentItem.Title);
output.push('</span>');
break;
case "Unit 4":
output.push('<span style="color: DarkOliveGreen ;">');
output.push(ctx.CurrentItem.Title);
output.push('</span>');
break;
case "Unit 5":
output.push('<span style="color: GoldenRod;">');
output.push(ctx.CurrentItem.Title);
output.push('</span>');
break;
case "Unit 6":
output.push('<span style="color: Coral;">');
output.push(ctx.CurrentItem.Title);
output.push('</span>');
break;
default:
output.push(ctx.CurrentItem.Title);
break;
}
return output.join('');
}
taskSample.CustomizeFieldRendering();

Answer 1

In Tasks default view Task Name (linked to item with edit menu) column is used by default for rendering task name. If so, then you should use LinkTitle internal name instead of Title.
Example
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
Templates: {
Fields: {
'LinkTitle' : {
'View' : function(ctx){
var percentValue = ctx.CurrentItem.PercentComplete;
if(percentValue == "100 %"){
return String.format('<span style="background-color:#00ff00">{0}</span>',ctx.CurrentItem.Title);
}
else {
return String.format('<span>{0}</span>',percentValue = ctx.CurrentItem.Title);
}
}
}
}
}
});
});
Result