Getting Started with JS Link

Blog

Author: Michael Koger

Date: Oct 27, 2016

This is the first post in a series on JS Link, where we explain what JS Link is, how it can be applied to different objects in a SharePoint site, and how the rendering actually takes place. Future posts will contain code samples and will discuss how JS Link can be used to customize the rendering of List Views, List Forms, and individual List Fields.

What is JS Link and why do we care?

JS Link, to be put simply, is a link to a JavaScript file. SharePoint 2013 introduced a new web part property (JS Link) that provides users and developers with a simple way to implement Client-Side Rendering (CSR) solutions in SharePoint. Client-Side Rendering is simply a term for when the data is transformed using the client rather than the server. This means client-side technologies, such as HTML and JavaScript, can be used to style complete List Views, Fields, Search Results and more. This makes the process of displaying data in a custom format on the page much simpler and more intuitive, especially for web developers who have never used SharePoint before.

Advantages of Client-Side Rendering:

  • Performance – since the rendering is done on the client side, the burden is taken away from the server. This means that the pages can load faster when using CSR.
  • Ease of Development – if you have ever used XSL, especially in SharePoint, then you know that working with XSL is never simple. By using a technology that all web developers should be familiar with, JavaScript, Client Side Rendering should be much easier to implement. This should mean reduced development time, and less bugs.
  • Flexibility – You can chose to overwrite just a particular field, the header, footer, or the entire view. You can also extend it; you’re not limited to using just JavaScript either; you can also use plugins such as jQuery.

Examples of JS Link and Client-Side Rendering Solutions:


Tasks with Percent Complete


Tasks with Colored Priority


Documents with Icon

How do we apply JS Link?

There are a number of objects that can be used to attach JS Link references to. This list includes, but is not limited to:

  • Site Columns
  • Content Types
  • List Views
  • List Forms (e.g. New / Edit / Display forms)
  • List View Web Parts
  • List Form Web Parts

When we discuss applying JS Link in this section, we will be referring to applying a JavaScript file to a List View Web Part or a List Form Web Part using JS Link. In future posts, we will discuss how we can apply JS Link to some of the other objects such as Site Columns or Content Types.

To apply a JavaScript file to a List View Web Part or a List Form Web Part, first edit the page containing the web part. Then edit the web part. Under the Miscellaneous section of the web part properties, locate the JS Link property and update this value with the link to where the JavaScript file is located.

Apply JS Link Script

*Note: The JS Link property accepts the following SharePoint tokens, which gives you complete flexibility of where you deploy your JavaScript to:

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

You can also apply more than one JSLink reference at a time by separating each reference with the pipe | symbol.

CONCLUSION:

This blog post briefly covered JS Link, Client-Side Rendering and what they can do. It listed some of the advantages of using JS Link and Client-Side Rendering, including the potential performance benefits and their flexibility. Finally, it discussed how a JavaScript file can be linked to a List View Web Part or List Form Web Part using JS Link.

In the next post in the series, I plan on looking at some real-world examples of how JS Link and Client-Side Rendering can be used to implement custom field and view rendering.

This post is written by Geocent