Code Play and Learn

Rendering On Sharepoint TaskList Using JSLink( Client-Side Rendering in SharePoint 2013)



Here i am giving you demo of JSlink(Client side Rendering) on SharePoint Task List

This is one of the cool feature of SharePoint and in this blog i go through ,what it is Actually

Summary: Add Task Status Indicators in Task List SharePoint 2013 using JS Link, Customize Status Field in Task list with JSLink

So without wasting time let’s start the task you just need to follow bellow step

Step1 Create  SharePoint Task List (Assume that you already know How to Do this)

Step2 Create Js File let say JSLink_Demo.JS

Step3 Copy Below Code in your file and save it(Comment  part is just for your Understanding of code you can ignore while u copy the code)

//Below Function is build object and Override from Register Tamplate

//Object take properties //like..View,Header,Body,Footer,Group,Item,Field,Prerender,Postrender

//As I only want to override the Status column, I’m going to use the Fields property. The other //properties can be used to override different elements of the web part

(function () {

var statusFieldCtx = {};

statusFieldCtx.Templates = {};

statusFieldCtx.Templates.Fields = {

“Status”: {

“View”: StatusFieldViewTemplate       }




//you can rendering on NewForm, EditForm,Detail Form also

//if you want to Renderring on NewForm then Define

 // NewForm: StatusFieldViewTemplate

function StatusFieldViewTemplate(ctx) {

var _statusValue = ctx.CurrentItem.Status;

if (_statusValue == ‘Completed’)


return “<span style=’background-color : green’>” + _statusValue + “</span>”;


if (_statusValue == ‘In Progress’)


return “<span style=’background-color : yellow’>” + _statusValue + “</span>”;


if (_statusValue == ‘Not Started’)


return “<span style=’background-color : gray’>” + _statusValue + “</span>”;



Step4 Now Upload your JS File  in Master Page gallery or in Style Library in SharePoint

Step5 now open your SharePoint page where your TastList is placed…. and now Edit your task list and apply JS Link in Jslink Property as mention in below image


The JSLink property also accepts other SharePoint tokens, which gives you complete flexibility of where you deploy your JavaScript to:

Now apply and press ok..the Final Task List StatusColumn look Like Below

Hope you Guys got some good information about JSLink ,still if you have any Query you can feel free post your Question I will try to solve your Questions

Hope you Enjoy Cheers!!!