SharePoint 2013 - Display Templates

Display Templates are sort of stand-alone files in which Managed Properties (SharePoint columns, like Title, Description, etc) are being retrieved and HTML, CSS en JavaScript can be processed. These files can be rendered in one or multiple pages of your SharePoint site. They’re used in order to control the display of Web Parts. Display Templates consist of two separate HTML files and with each of these files, a JS file is automatically being generated and attached. You will not be doing anything with these JS files, SharePoint does that automatically.

The first HTML file is the Control Display Template and the second is the Item Display Template. The Control Display Template determines the overall structure of how the results are presented (like lists, lists with paging, slide shows, etc). For example, a <ul> in which you will later render <li>'s.

The Item Display Template determines how each result in the set is displayed (like list items, images, text, ect). That would be the <li> (and its content) which we named in the previous example. Just one <li>? Yes, it’s a template, so a script will loop through and reuses the same <li> over again. The Web Part settings decide how many items are displayed, the templates have nothing to do with that.

The reason there are two separate (Control and Item) files instead of a single one, is the fact that Control- and Item Display Templates can be randomly combined. So they are not necessarily permanent sets. It may well be that you create multiple Item Display Templates for the same Control Display Template, because the Item Templates do use the same markup and styling, but, for example, retrieve the values of different SharePoint columns (Managed Properties).

Nice story, but how do I do this?
Let's start at the beginning. Because I used SharePoint Online myself (where you don't want to deploy from Visual Studio), this blog post will be based on it as well. Therefore we will use the SharePoint Design Manager and Notepad++.

Personally, I like the 'Search Results' method best. It is just one Web Part (the Search Results Web Part), with which you can literally and metaphorically go anywhere you want. You just use a different Search Results Web Part for every Web Part you want on the page, give it its own query and let the Display Templates decide how and what is displayed. Thus, the same Web Part can look completely different and display other data in every instance.
I have to admit that I didn’t figure out every kind of Display Template there is, so I don’t know if in some scenarios there are better alternatives. What I do know is that Search Results work just fine for what I needed to do with it.

Start

You can find the Search Results Display Templates here:
https://[YourDomain].sharepoint.com/_catalogs/masterpage/Display%20Templates/Search/

If you have a child SiteCollection which you want to use, the path would be something like this:
https://[YouDomain].sharepoint.com/sites/[YourSiteCollection]/_catalogs/masterpage/Display%20Templates/Search/

Map Network Drive

The easiest way of working is to map a network drive for the Master Page Gallery of you SharePoint site, so you can access the files via Explorer on your computer. Read this to find out how to do that.
Note that: You have to use IE, you have to check the 'Keep me signed in' option, You have to add your SharePoint domain/site to your trusted sites and you have to open a random library using the 'Open with Explorer' option in the ribbon (only possible in IE). After these steps you should be able to map the MP Gallery. As long as you are logged into the site (via the browser that is), you can use Explorer to access the files in the MP Gallery. If you log out, access will be denied in Explorer as well. In the MP Gallery you can navigate to Display Templates -> Search for the right location.

Starter Display Templates

Below I've put links to some starter templates you can use as a base. The Control Display Template contains a heading and a container for the items, the Item Display Template shows a Title and a Description.

• Control Display Template
• Item Display Template

Indeed, the JS files are missing. This is because SharePoint creates those itself, as soon as you upload the files above to the Display Template Gallery. You have to use the SharePoint user interface (the browser) to upload the files though. Unfortunatly, via the mapped network drive the JS files will not be generated at all.

Where to go from here?

It would've become a very very long piece of text if I was going to write down detailed howto’s in this blogpost, so I've created a few separate blogposts to explain a few options:

• Display Templates: Build a screen-wide slider
• Display Templates: Build a 'Latest News' web part Available soon
• Display Templates: Build an Events/Agenda overview Available soon

Finally, I wrote a blogpost with some tips & tricks. Obviously I ran into some issues when I started working with the Display Templates myself. To save you the grief, I wrote the solutions to these issues into this blogpost and also some best practices to prevent problems.

• Display Templates: Tips & Tricks

What is also very interesting, is this web page. You can read everything about how and why and the Display Template structure.

Wil je dit in het Nederlands lezen?