AFRAIT

The out of the box look and feel of an task list could have been better. But there we can just use our favourite option. CSR = Client Side Rendering! We can get a great user experience if it looks like in the picutre below:

And now how it works. Create a default tasklist and take the javascript below to get the progress bar:

var taskSample = taskSample || {};

	taskSample.CustomizeFieldRendering = function () {
	RegisterSod('hierarchytaskslist.js', '/_layouts/15/hierarchytaskslist.js');
	LoadSodByKey('hierarchytaskslist.js', null);

	// Intialize the variables for overrides objects
	var overrideCtx = {
	Templates: {
	Fields: {
				'PercentComplete': { 
					'View' : taskSample.PercentCompleteRendering
				}
			}
		}
	};

	// Register the override of the field
	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
}

taskSample.PercentCompleteRendering = function (ctx) {
	var output = [];
	  output.push('<div style="background: #c6c6c6; display:block; height: 20px; width: 100px;">');
	  output.push('<span style="color: #686868; position:absolute; text-align: center; width: 100px;">');
	  output.push(ctx.CurrentItem.PercentComplete);
	  output.push('</span>');
	  output.push('<div style="background: #ffdb16; height: 100%; width: ');
	  output.push(ctx.CurrentItem.PercentComplete.replace(" %", ""));
	  output.push('%;"></div></div>');
	  return output.join('');
}

taskSample.CustomizeFieldRendering();

How to upload and link it to a list? Check here!

And if you have questions? You know it 🙂 Don’t be afraIT to ask!

Easy, fast and powerful, that’s an afraIT shorty. More from this category here.