SharePoint 2013 JSLink property

JS Link property is SharePoint 2013 new addition property where users can Control Rendering of Fields, Items and WebParts using a Java Script file.

I will use my existing students list from my previous post for this example. I also want to makes the background color of each student different based on the status field.

Results

DisplayTemplateList1
DisplayTemplateList2

Solution

1. Create Javascript as per below and Save it as DisplayTemplate.js in Root site > Style Library

(function () {
 var itemCtx = {};
 itemCtx.Templates = {};

 itemCtx.Templates.Header = "<div><b>Students</b></div><ul>";
 itemCtx.Templates.Item = StatusOverride;
 itemCtx.Templates.Footer = "</ul>";

 itemCtx.BaseViewID = 1;
 itemCtx.ListTemplateType = 100;

 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
})();

function StatusOverride(ctx) {
 if (ctx.CurrentItem.Status == 'Active')
 {
  return "<li style='background-color: green;width: 300px;height: 24px;'>" + ctx.CurrentItem.Title + " – " + ctx.CurrentItem.Status + "</li></span>";
 }
 if (ctx.CurrentItem.Status == 'Not Active')
 {
  return "<li style='background-color: red;width: 300px;height: 24px;'>" + ctx.CurrentItem.Title + " – " + ctx.CurrentItem.Status + "</li></span>";
 }
 if (ctx.CurrentItem.Status == 'Pending')
 {
  return "<li style='background-color: yellow;width: 300px;height: 24px;'>" + ctx.CurrentItem.Title + " – " + ctx.CurrentItem.Status + "</li></span>";
 }
}

2. Set Students List View Webpart JSLink property to ~sitecollection/Style Library/DisplayTemplate.js and Click Apply

DisplayTemplateList3

References

Advertisements

Tagged: , , , ,

Leave a Reply

Please log in using one of these methods to post your comment:

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

%d bloggers like this: