SharePoint 2013 Hosting :: Usage of JSLink in SharePoint 2013

In this post we are going to see the best way to make use of the JSLink in SharePoint 2013. Till sharepoint 2010, to customize any list views (Lists or Libraries), we’re making use of 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 weblog post we will see what’s client side rendering and how you can use client side rendering and the best way to debug exactly the same

ahp_freehostSHP

Client Side Rendering is actually a new function that got introduced in SharePoint 2013 that will enable the developers to transform the data around the client rather on the server. This gives large amount of alternatives to the developers to utilize client side technologies such as HTML, JQuery and any other javascript frameworks.

A number of the examples exactly where the Client Side Rendering will be helpful:

  1. Format the values within the list view net parts
  2. Make the columns as read only within the Edit or New list type

In this blog post we will see how we can use client side rendering to format the values within the XsltListViewWebPart

When we talk about, client side rendering, there are two items that we want to think about in SharePoint 2013.

  • Show Templates

    Show Templates in addition to Handle Templates and Item Templates are used in SharePoint Search and is utilized to entirely transform the search outcomes display

  • JSLink

    JSLink is new home attached to list views, content kinds, fields and how the JSLink operates is, we just require to associate a link to a javascript file to this JSLink property associated to either list views or list types including new or edit form

See the attached screen shot where the JSLink home will be found for any list view web part

1dfhesd

In this weblog post we’ll see how to modify the XSLTListViewWeb Part to add hyperlinks to 1 of the list column dynamically using the javascript as well as, add some graphical image to another column exactly where we wish to show the web site usage inside a graphical representation. We are able to nevertheless attain the identical factor in the old XSLT method and utilizing XSLT based approach is old way of achieving exactly the same point

Javascript File

Very first we are going to create the javascript file and we’ll see how to associate this javascript file for the JSLink textbox control towards the XSLTListView Webpart. As explained earlier, we will make an effort to add a brand new worth a Permission column. By default there wont be any value in the permission column. But when the list is rendering we are going to get the worth from the “SiteURL” column and we are going to append website collection permission web page of that url and we are going to render that new worth to the “Permission” column

See the under 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

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

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

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

Inside the above syntax, what we’re saying was, replace the “Permissions” field value with that worth that’s returned from “changePermissionLink”

“changePermissionLink” is a custom javascript function which has been written which will return the worth that may be placed inside the permission column

If you want to override worth of another field, we are able to add the same for the Fields object as shown under Subsequent we have to register our override object with SharePoint making use of RegisterTemplateOverride method as show under SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

Now we are going to see what changes we have 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