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

Hi,

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       }

};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx);

})();

//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

img

Rember:

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

  • ~site
  • ~sitecollection
  • ~layouts
  • ~siteLayouts
  • ~siteCollectionLayouts

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

StatusList

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!!!

Thanks

SPS

Advertisements

One thought on “Rendering On Sharepoint TaskList Using JSLink( Client-Side Rendering in SharePoint 2013)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s