Create JavaScript Display Template in SharePoint 2013

While working with SharePoint there is a common requirement to Upload JavaScript Files that you want to use in one of your WebParts or with the new JS Link property of a List,Field,Form or a WebPart in your SharePoint 2013 site.

You can either upload these .js files in the Styles or Site Asserts Library or you can add it to the Master Page Gallery as a new JavaScript Display Template (using Display Template Content Type). Adding it as a JavaScript Display Template has its own benefits especially if you are going to use it in JS Link property for targeting a particular webpart or List.

JavaScript Display Template Content Type - This is a new Content Type Introduced in SharePoint 2013 to Create a new custom CSR JavaScript Display Template in the Master Page gallery of the site. JavaScript Display Template Content Type has some special Site Columns added to it that will help specify the target element (view,webpart etc..) where the JavaScript File's magic or custom rendering will be Implemented.

Lets Look at the Steps to upload a new Js file as a new Javascript Display Template and look at the description of Site Columns.
1. Navigate to the Master Page Gallery (Site Settings -> under Web Designer Galleries -> Master Pages).
2. Select Files tab and then Upload Document.
3. Browse to the new JavaScript file that you have created and select Ok.
Task Status Indicators
JavaScript Display Template Upload Js
4. Next select "JavaScript Display Template" in the Content Type drop-down.
Add Javascript display template SharePoint 2013
5. Next specify the Name, Title, Description properties along with some special properties like "Target Control Type Standalone,Target Scope and Target List Template ID" for this new JS file.
Target Control Type - By description "Target Control Type is the Type of Control that you will be using in this Display Template or JavaScript File". For example if your Display Template or JavaScript File will be controlling the rendering of a View in a List, then the Target Control Type value should be "View".
There are three possible options
  • Form
  • View
  • Field
Standalone - Specifies if you need to include this JavaScript File Override during view selection.Default options are
  • Override
  • Standalone
Target Scope - URL of the website this override applies to. This can be a relative path to your Site Collection or subsite.
Target List Template ID - Specify the ID of the list Template type this Override or JavaScript render applies to.Use the list Here to determine the Template Id for the type of list that you will applying this rendering upon.
For example, 107 would be the Target List Template ID for a Tasks List.
Upload Js template SharePoint 2013

Upload JS Template SharePoint 2013

Once your done adding document properties Save it.
Don't forget to Publish it as major Version before start using it.
Next take a look at an example of using this JavaScript file to Add Task Status Indicators in SharePoint 2013 using JS Link >>


Post a Comment

Popular Posts