Progress bar in task list (en)

Progress bar in task list de en Title

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:

Progress bar in task list (de en)_1

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

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('<div style="background: #ffdb16; height: 100%; width: ');
	  output.push(ctx.CurrentItem.PercentComplete.replace(" %", ""));
	  return output.join('');


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.

Leave a Reply

Your email address will not be published. Required fields are marked *