JS Links

This post will give an overview of JSLinks. JSLinks provide the ability to override the Client-Side Rendering (CSR) templates for SharePoint list fields, forms and views. To view the raw code, here is a link to the github project.

SharePoint Objects

SharePoint 2013 introduced the JSLink property to many objects. The following is a list of SharePoint object types that have the JSLink property:

URL Wildcards

The JSLink property MUST be a relative url or use a wildcard. For example, “https://sharepoint.com/siteassets/jslinkfile.js” will not be loaded, but “/siteassets/jslinkfile.js” would be loaded. The following wild cards are available:

Loading Multiple Scripts

The JSLink property uses the ‘|’ as a delimiter for loading multiple script files.

Client-Side Rendering (CSR) Template Overrides

Template Manager

The template manager is used to register overrides and apply customizations to the SharePoint object. The following are a list of properties available to override:


The template contains the following properties to override:

List Customizations

This section will give an overview of the customizing areas of a SharePoint List. The developer is able to customize the html of the following areas:

Content Type

The content type object JSLink property can be used to customize the following areas:

CSR Content Type Template

The CSR template for the list form is:


The field object JSLink property can be used to customize the following areas:

CSR Field Template

The CSR template for each field is:


The view object JSLink property can be used to customize the following areas:

CSR View Template

The CSR template for the view is:

gd-sprest NPM Library

The gd-sprest library has been used to register and demonstrate various JSLink customizations. The library has a JSLink template builder to help minimize the amount of code required to write. The library also has helper methods for customizing the field, form and view. Below is the minimal template for registering a CSR override.

Code Template
"use strict";

 * JSLink: [ClassName] Customization
var [ClassName] = (function () {
     * Methods

     * Initialization
    function init() {
        // Register the JSLink template(s)
                    // Template overrides go here

     * Public Interface
    return {
        init: init

// Write the javascript to initialize the CSR override. This will ensure it's called when MDS is enabled
document.write("<script type='text/javascript'>(function() { [ClassName].init(); })();</script>");


I created a github project to use as a reference for this post. This project uses the Visual Studio SharePoint Add-In project type.


The first thing I did was create a demo list called “Demo”. This list has one custom choice field called “Group”. A custom view called “JS Link” was created to demonstrate the various areas to customize.

To apply customizations to these objects, I updated the Schema.xml file and added the JSLink property to the following objects:

      <ContentType ID="0x01CC4335B8F351436FA8D01DCC020F4AF7" JSLink="~site/Scripts/gd-sprest.min.js|~site/Scripts/form.js">
          <FieldRef ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Name="Title" />
          <FieldRef ID="{99bff9c3-9d84-4870-adcf-601720461f6d}" Name="GroupType" />
        <Folder TargetName="Item" />
      <ContentTypeRef ID="0x0120" />

Note - By default the ContentTypeRef is used, but you can use the “Create GUID” tool and change the element from “ContentTypeRef” to “ContentType” and update the “ID” attribute appending the GUID.

      <Field ID="{99bff9c3-9d84-4870-adcf-601720461f6d}" Type="Choice"
             Name="GroupType" StaticName="GroupType" DisplayName="Group"
          <CHOICE>Group 1</CHOICE>
          <CHOICE>Group 2</CHOICE>
          <CHOICE>Group 3</CHOICE>

      <View BaseViewID="2" Type="HTML" WebPartZoneID="Main" DisplayName="JSLink" MobileView="TRUE" SetupPath="pages\viewpage.aspx" ImageUrl="/_layouts/15/images/generic.png?rev=23" Url="JSLink.aspx">
        <Toolbar Type="Standard" />
        <XslLink Default="TRUE">main.xsl</XslLink>
        <RowLimit Paged="TRUE">30</RowLimit>
          <FieldRef Name="LinkTitle"></FieldRef>
            <FieldRef Name="GroupType" />
            <FieldRef Name="GroupType" />
            <FieldRef Name="Title" />
          <ParameterBinding Name="NoAnnouncements" Location="Resource(wss,noXinviewofY_LIST)" />
          <ParameterBinding Name="NoAnnouncementsHowTo" Location="Resource(wss,noXinviewofY_DEFAULT)" />


The field script registers an override for the edit form and view. Setting an override at the field level, will ensure it’s applied to ever list view. Below is the code sample for registering this customization.

// Register the JSLink Template
        Templates: {
                Fields: {
                        GroupType: {
                                EditForm: (ctx, field) => { $REST.Helper.JSLink.hideField(ctx, field, true); },
                                View: $REST.Helper.JSLink.disableQuickEdit


The form script registers an override to the “Title” field in the new form. Below is the code sample for applying a default value to the “Title” field.

    // Method to set the default value
    function setDefaultValue(ctx, field) {
        // Default the value
        ctx.CurrentFieldValue = "Gunjan";

        // Render the field
        return $REST.Helper.JSLink.renderField(ctx, field);

     * Initialization
    function init() {
        // Register the JSLink template
            Templates: {
                Fields: {
                    Title: {
                        NewForm: setDefaultValue



The view script registers an override to all the areas it can customize. It will place a color block before and after the default areas. Below is the code sample for applying these overrides.

// Register the JSLink templates
        BaseViewId: 2,
        Templates: {
                Body: body,
                Footer: footer,
                Group: group,
                Header: header,
                Item: item


The example github project will apply the following customizations:

Default Field Value

Default Field Value

Disable Edit in List View

List View (Read)

List View

List View (Edit)

Disable Quick Edit

Highlight List View Customization Areas

View w/ No Items

View With No Items

View w/ Items

View With Items


I hope this post has been helpful for those applying customizations through JSLinks.