Share via

SharePoint 2013: Design Manager - Use of Display Templates

  • Article

Display Templates?

If you've never heard of, it is quite normal, as it is new in SharePoint 2013. These Display Templates can dynamically change the display of search results, making them particularly match "Result Types".

The use of XSLT? Done!

These Display Templates allow you to free yourself from the use of XSLT since you can edit using the HTML / JavaScript / CSS trio. For those who have already handled (or experienced) the XSLT, it’s a good news.

Access to the Display Templates

You can access Display Templates via:

  • The Design Manager, "Edit Display Templates" link - To view the list of templates,
  • The "Site Settings", "Master pages and page layouts" link - To add/edit a template.

We will detail here this second link.

http://spasipe.files.wordpress.com/2012/11/183.png

Click the "Display Templates" folder:

http://spasipe.files.wordpress.com/2012/11/115.png

Choose here to open the "Search" folder:

http://spasipe.files.wordpress.com/2012/11/217.png

You will find the Display Templates, each being defined by:

  • An HTML file: its definition, this is the file you need to edit (or create) to define views,
  • A js (JavaScript) file: this file is generated by SharePoint through the HTML file. You must not edit this file, it is always the HTML file you need to modify, SharePoint converting the js file on the fly.

http://spasipe.files.wordpress.com/2012/11/46.png

File names are relatively speaking, above we can deduce that the Display template controls the display of Word documents "Hover Panel".

We will change this "Hover Panel" later in this article:

http://spasipe.files.wordpress.com/2012/11/192.png

Use of "Result Types"

The "Display Templates" are closely related to another SharePoint 2013 new functionality: the "Result Types". In summary, a "Result Type" it is a set of rules that are used when displaying search results.

When you run a search, and when the results are displayed on the results page, each result is verified to see if it meets one of the rules: If this is the case, the "Display Template" associated with this rule (this "Result Type") is used to display the item.

For example, you can define a rule (a Result Type) that combines a display (a Display Template) especially for Word documents containing "SharePoint" in their title - This is the example that will be used later in this article.

Example of use

In this example, the scenario is that you need to display a customized "Hover Panel" for any Word document containing "SharePoint" in its title.

To do this, we will:

  • Duplicate the "Item_Word_HoverPanel.html" file to customize the Hover Panel (I added a text "Submit for approval" at the bottom of the window - it's late, I lack inspiration J))
  • Duplicate the "Item_Word.html" file to use the above file.

The steps are as follows:

1. Download the "Item_Word_HoverPanel.html” file

http://spasipe.files.wordpress.com/2012/11/46.png

2. Modify it and upload it again in the gallery as "Item_Word_HoverPanel_SPAsipe.html"

http://spasipe.files.wordpress.com/2012/11/77.png

3. Fill the properties (note the ‘Target Control Type" parameter)

http://spasipe.files.wordpress.com/2012/11/89.png
http://spasipe.files.wordpress.com/2012/11/95.png

4. Similarly, download "Item_Word.html" and rename it "Item_Word_SPAsipe.html".

Open the file with an extremely powerful tool (Notepad for example) and change the link to the customized "Hover Panel" (note that this is the. Js file that is referenced, not the HTML one).

http://spasipe.files.wordpress.com/2012/11/201.png

5. Upload this file in the gallery, and note that the Js files associated with the HTML files have been generated during the upload.

http://spasipe.files.wordpress.com/2012/11/b.png

6. If you start the Design Manager, "Edit Display Templates" link, you see that the two HTML files are marked as having been converted.

http://spasipe.files.wordpress.com/2012/11/bb.png

7. It is now time to create a Result Type for our needs.

Go to the Site Settings, click “Result Types”.

http://spasipe.files.wordpress.com/2012/11/116.png

8. The list of existing Result Types appears, click "New Result Type"

http://spasipe.files.wordpress.com/2012/11/132.png

9. Conditions must be defined: here we want the items using our new "Hover Panel" to be Word documents having "SharePoint" in their title.

http://spasipe.files.wordpress.com/2012/11/153.png

10. It only remains to associate this condition with our template

http://spasipe.files.wordpress.com/2012/11/281.png

11. The Result Type is created

http://spasipe.files.wordpress.com/2012/11/291.png

Result

1. The document chosen for the test has "SharePoint" in its title, and you can see that the customized Hover Panel that displays

http://spasipe.files.wordpress.com/2012/11/251.png

2. If I choose an another Word document, the default “Hover Panel" displays

http://spasipe.files.wordpress.com/2012/11/e.png

Web parts parameters

The Display Templates are configurable (among other places) in the "Search Results" web part properties:

http://spasipe.files.wordpress.com/2012/11/a.png

By default, the rules (Result Types) are used, but you can change this behavior.

http://spasipe.files.wordpress.com/2012/11/aa.png

Conclusion

Beyond this example a bit trivial, these features allow many opportunities, especially for future "search-driven" applications. Personally, we find this feature very interesting.

See Also

This article is part of a series of articles dedicated to the Design Manager in SharePoint 2013. They are actually written in French and hosted on my blog, but we will translate and transfer them on the TechNet Wiki.