Usage of JSLink in SharePoint 2013

In this post we will see how to use the JSLink in SharePoint 2013.
 
Till sharepoint 2010, to customize any list views(Lists or Libraries), we are using XSLT to customize the representation of the list view or document library view.
 
In SharePoint 2013, a new feature has been added called (Client Side Rendering). In this blog post we will see what is client side rendering and how to use client side rendering and how to debug the same
 
Client Side Rendering is a new feature that got introduced in SharePoint 2013 which will allow the developers to transform the data on the client instead on the server
 
This gives lot of options to the developers to use client side technologies such as HTML, JQuery and any other javascript frameworks.
 
Some of the examples where the Client Side Rendering will be helpful:
 
1. Format the values in the list view web parts
2. Make the columns as read only in the Edit or New list form
 
 
In this blog post we will see how we can use client side rendering to format the values in the XsltListViewWebPart
 
When we talk about, client side rendering, there are two things that we need to consider in SharePoint 2013.
 

• Display Templates

Display Templates along with Control Templates and Item Templates are used in SharePoint Search and is used to completely transform the search results display

•  JSLink

JSLink is new property attached to list views, content types, fields and how the JSLink works is, we just need to associate a link to a javascript file to this JSLink property associated to either list views or list forms such as new or edit form
 
See the attached screen shot where the JSLink property will be found for a list view web part

In this blog post we will see how to modify the XSLTListViewWeb Part to add hyperlinks to one of the list column dynamically using the javascript and also, add some graphical image to another column where we want to display the site usage in a graphical representation

We can still achieve the same thing in the old XSLT approach and using XSLT based approach is old way of achieving the same thing

Javascript File

First we will create the javascript file and we will see how to associate this javascript file to the JSLink textbox control to the XSLTListView Webpart

As explained earlier, we will try to add a new value a Permission column. By default there wont be any value in the permission column

But when the list is rendering we will get the value from the "SiteURL" column and we will append site collection permission page of that url and we will render that new value to the "Permission" column

See the below javascript file that I have written to modify the same and we will discuss in detail about this javascript



First we need to write a javascript function which is self invoking and the syntax of that function is


(function(){
})();

So, when the page loads, that function will be called automatically. With in that function, we will write the logic for formatting the list columns inside XSLTListView web part

First we need to declare variables for fields for which we need to override the data

var overrideCtx = {};

overrideCtx.Templates = {};

The script specifies that we need to override the "Permission" column and we need to specify that value for the Fields override

The syntax for Fields to override was

overrideCtx.Templates.Fields = {FieldName : {Scope : Override}}

• FieldName - This is the internal name of the field you want to override.
• Scope – This defines when to override the field. The choices are "View","DisplayForm","EditForm", and "NewForm"
• Override – The actual override. This can be a HTML string with JavaScript embedded, or a function to be executed. In our case we are using a function that needs to be executed

overrideCtx.Templates.Fields = {'Permissions': {'View':changePermissionLink}}

In the above syntax, what we are saying was, replace the "Permissions" field value with that value that is returned from "changePermissionLink"

"changePermissionLink" is a custom javascript function that has been written which will return the value that can be placed inside the permission column

If you want to override value of another field, we can add the same to the Fields object as shown below

Next we need to register our override object with SharePoint using RegisterTemplateOverride method as show below

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

Now we will see what changes we need to do to "changePermissionLink" to update the new value
 

 

changePermissionLink will take a parameter called ctx, which will give the complete context information of the current item that is being rendered, such as all the list columns information

To get the current field information, we can use either of the below syntax

var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
                           or
var fieldValue = ctx.CurrentItem.Permissions; //Provided if you know the internal name of the field

Then we will get the SiteURL field using the following syntax

var siteUrl = ctx.CurrentItem.SiteURL;

Then we use the following code to format the hyperlink and return that value. As you can see, we are embedding the html anchor in the format

var permissionUrl = $(siteUrl).html()+"/_layouts/15/user.aspx"

var permissionLink = 'Permission'

return permissionLink;

Associating this JS file to JSLink property of XSLTListView web part.

• Edit the page
• Edit the web part
• In the edit web part properties, go to miscellaneous section there you will find a JS Link text box and to that text box value provide the url of the above JS file

When providing the path to the custom js file to the JSLink property, you can use the below syntax

 

~sitecollection/Style Library/LCACollabDB/JS/LCACollabDBRendering.js

 

To add multiple JS files to the JSLink, you can use the pipe symbol. See the below syntax for the same

~sitecollection/Style Library/LCACollabDB/JS/LCACollabDBRendering.js|~sitecollection/Style Library/LCACollabDB/JS/LCACollabDBRendering1.js