JavaScript Display Templates

There are 2 ways to include "JavaScript files" in SharePoint forms, web parts, lists, views -

1) Inclcude .js files in "Site Assets Library" or "Script Library".
2) Upload .js file in Master Page Gallery under "JavaScript Display Template Content Type".

Discussing more about "Javascript Display Template" -

There are 2 ways to include "JavaScript files" in SharePoint forms, web parts, lists, views -

1) Inclcude .js files in "Site Assets Library" or "Script Library".
2) Upload .js file in Master Page Gallery under "JavaScript Display Template Content Type".

JavaScript Display Template Content Type has some special Site Columns added to it that will help specify the target element (view,web-part etc..) 

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.

4. Choose Content Type as "JavaScript Display Template",

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.

Lastly, "Publish a major version" of the js file uploaded in the master page gallery. 

Template ID List :-

• 100   Generic list
• 101   Document library
• 102   Survey
• 103   Links list
• 104   Announcements list
• 105   Contacts list
• 106   Events list
• 107   Tasks list
• 108   Discussion board
• 109   Picture library
• 110   Data sources
• 111   Site template gallery
• 112   User Information list
• 113   Web Part gallery
• 114   List template gallery
• 115   XML Form library
• 116   Master pages gallery
• 117   No-Code Workflows
• 118   Custom Workflow Process
• 119   Wiki Page library
• 120   Custom grid for a list
• 130   Data Connection library
• 140   Workflow History
• 150   Gantt Tasks list
• 200   Meeting Series list
• 201   Meeting Agenda list
• 202   Meeting Attendees list
• 204   Meeting Decisions list
• 207   Meeting Objectives list
• 210   Meeting text box
• 211   Meeting Things To Bring list
• 212   Meeting Workspace Pages list
• 301   Blog Posts list
• 302   Blog Comments list
• 303   Blog Categories list
• 1100   Issue tracking
• 1200   Administrator tasks list

5. Since the File was upload in Master Page Gallery and we are using it in the same Site collection (not Subsite) the JS Link reference will be

~site/_catalogs/masterpage/JSLink.js

If the file was to be used in a Subsite you can use ~sitecollection URL token Instead.