JS Link


JS Link is one of the client side rendering(CSR) mechanism.

What is meant by CSR?

If the data is transformed by the client rather than the server by using client side technologies such as HTML,CSS and JavaScript, then it is known as CSR.

In Previous version of SharePoint, server side rendering like XSLT and CAML were used. We can even prefer server side rendering(XSLT) in SharePoint 2013, by referring XSL file in XSL Link and checking the Server render box as highlighted in red below.

WEBPART.png

JS Link can be found in List view web parts under Miscellaneous section(highlighted in black above). It links to a JavaScript file where rendering logic is written. To support JS Link, new content type called JavaScript Display template has been introduced with special site columns such as Target Control type, Target Scope etc. to ensure that CSR is targeted to the correct list web part.

Using JS Link, we can customize or control the rendering of

  • List Views
  • Forms(Display, Edit and New Forms)
  • Fields

Two events used for customization are:

  • OnPreRender
  • OnPostRender

To render a custom template, we need to register the template using the below javascript method:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(options);

where options takes the below structure:

var options = {
Templates:{
View: /* function or string */,
Body: /* function or string */,
Header: /* function or string */,
Footer: /* function or string */,
Group: /* function or string */,
Item: /* function or string */,
Fields: {
'Field Internal Name': {
View: /* function or string */,
EditForm: /* function or string */,
DisplayForm: /* function or string */,
NewForm: /* function or string */
}
}
},
OnPreRender: /* function or array of functions */,
OnPostRender: /* function or array of functions */
};

To find the internal name of the field, navigate to the list settings and click on the field under columns. This will take you to the “Edit Column” page. In “Edit column” page, click on the url to see the internal name of the field located at the end of URL as shown below:

https://yoursite.com/sites/SharePointConnect/_layouts/15/FldEdit.aspx?List=%9B7D21587E%2D7759%2D463A%2D89D2%2D014A41493451%7D&Field=Mark

For MDS(Minimal Download Strategy) disabled site:

We wrap the rendering logic in anonymous function so that it executes itself when the page is loaded and the global namespace will not be polluted.

Example 1:

(function()
{
var markContext  = {};
markContext.Templates = {};
markContext.Templates.Fields = {
'Mark': { 'View' : customizemark }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(markContext);
})();
function customizemark()
{
var tem= ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
if(tem<50)
return "<span style='color:red;font-weight:bolder'>"+tem+"</span>";
else if(tem==50)
return "<span style='color:orange;font-weight:bolder'>"+tem+"</span>";
else if(tem>50)
return "<span style='color:green;font-weight:bolder'>"+tem+"</span>";
}

RESULT:

CSR-Sample1

Let us consider one more column called Status(Pass/Fail) and have requirement to show only status and not the mark. We can hide the column, ‘Mark’ from view using “Modify View” page but what about the forms. So, in order to hide the Mark field from forms, follow the below example:

Example 2:

(function () {
(window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"></script>'));
var hiddenFiledContext = {};
hiddenFiledContext.Templates = {};
hiddenFiledContext.Templates.OnPostRender = hideField;
hiddenFiledContext.Templates.Fields = {
"Mark": {
"NewForm": hiddenFiledTemplate,
"DisplayForm": hiddenFiledTemplate,
"EditForm": hiddenFiledTemplate
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(hiddenFiledContext);
})();
function hiddenFiledTemplate() {
return "<span class='csrHiddenField'></span>";
}
function hideField(ctx) {
jQuery(".csrHiddenField").closest("tr").hide();
}

 

RESULT:

HiddenField

For MDS Enabled site:

To apply Example-1 for MDS Enabled site, we need to register the template using:
RegisterModuleInit(relative path to file, function name);

RegisterModuleInit('/SiteAssets/CSR.js', Mark);
Mark();
function Mark()
{
var markContext  = {};
markContext.Templates = {};
markContext.Templates.Fields = {
'Mark': { 'View' : customizemark }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(markContext);
}
function customizemark()
{
var tem= ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
if(tem<50)
return "<span style='color:red;font-weight:bolder'>"+tem+"</span>";
else if(tem==50)
return "<span style='color:orange;font-weight:bolder'>"+tem+"</span>";
else if(tem>50)
return "<span style='color:green;font-weight:bolder'>"+tem+"</span>";
}

When we use JS Link in a page where there are more than one list view, the rendering or customization may not appear correctly. To ensure that it is applied to the respective views, three additional options are used:

  • List Template Type – ID of list template
List template type Template ID
Custom List 100
Document Library 101
Survey 102
Links 103
Announcements 104
Contacts 105
Calendar 106
Tasks 107
Discussion Board 108
Picture Library 109
DataSources 110
Form Library 115
No Code Workflows 117
Custom Workflow Process 118
Wiki Page Library 119
CustomGrid 120
No Code Public Workflows<14> 122
Workflow History 140
Project Tasks 150
Public Workflows External List<15> 600
Issues Tracking 1100
  • View Style – ID of different styles available in “modify view” page. To find the ID of each view style:
    • Go to Modify view page
    • Right click on the page and select view source
    • you can find the ID of the style in <option>
    • Below is the list of styles with ID

ID

Style
0 Basic Table
12 Boxed, No Label
13 Boxed
15 Newsletter
16 Newsletter, no lines
17 Shaded
20 Preview Pane
Default Default
  • Base View ID: Attribute of view element that can be found in SharePoint Designer
    • In General, BaseViewID of “AllItemsView” is equal to 1 and BaseViewID of “Summary view” is equal to 0

Uploading JS File:

It is recommended to upload js file to master page gallery. To upload in master page gallery, follow the below steps:

  • Go to Site settings ->Master pages under Web Designer Galleries (In case of Publishing site, it will be Master pages and page layouts under Web Designer Galleries)
  • In Master page Gallery, click on FILE tab and choose Upload Document
  • Browse the js file from your computer and select the content type as JavaScript Display Template.

Javascript Display TemplateJS Display Template.png

  • Target Control Type: Type of control for which customization is applied to. It can be
    • Form
    • View
    • Field
  • Standalone: Specifies to include js file to override during view selection. Options are
    • Override
    • Standalone
  • Target Scope: URL of the website to which override applies to.
  • Target List Template ID: ID of the list template to which override applies to. Refer the above table under List Template ID
  • Fill these columns and hit Save button
  • Don’t forget to publish it if you are uploading it in publishing site.

Publish

  • If you do not have permission to master page gallery, upload it to SiteAssets
  • Now, go to the list web part and refer the uploaded js file as:
    • ~site/_catalogs/masterpage/csr.js if you have uploaded js file in master page gallery
    • ~site/SiteAssets/csr.js if you have uploaded it in Site Assets
  • Use the token ~sitecollection instead of ~ site if you are referring the js file in list web part of subsite
    • Ex:~sitecollection/_catalogs/masterpage/csr.js
  • To refer more than one js file in JS Link, use pipe symbol, |
    • Ex:~site/SiteAssets/csr.js|~site/SiteAssets/Demo.js
  • NOTE: Use CTRL+F5 (Hard Refresh) if changes to the code are not reflected in the browser

Advantages:

  • Performance is better as it rendered by client rather than the server
  • Ease of development

Disadvantages:

  • JS Link is not supported in Survey and events lists like calendar
  • Browser Compatibility – works differently in different browsers
  • JS Link does not work for custom list forms created in SharePoint designer

Refer more sample codes here