New JavaScript Display Template in SharePoint 2013

Excellent Post at LearningSharePoint.com about the new JavaScript Display Template in SharePoint 2013.

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.



4. Next select “JavaScript Display Template” in the Content Type drop-down.


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.







Once your done adding document properties Save it.

Don’t forget to Publish it as major Version before start using it.


Ads by Google