Stage 11: Upload and apply display templates to the Content Search Web Part

This is a blog post in the series “How to set up a product-centric website in SharePoint Server 2013.”  In this series, I'll use data from a fictitious company called "Contoso" to show you how to use search features to set up a website based on product catalog data.
Note: Most of the features described in this series are not available in SharePoint 2013 Online.

For an overview of the blog posts in this series, go to How to set up a product-centric website in SharePoint Server 2013.

 

Quick overview

In previous blog posts, I showed you how to configure the query for a Content Search Web Part on a category page and a catalog item page. Although the query results displayed in the Web Parts were correct, they did not have a Contoso look, and they only displayed a title and a strange looking gray box.

In this blog post we'll learn:

 

Start stage 11

About display templates

Display templates are used to control how content should be displayed in a Content Search Web Part (CSWP). Remember that the content that is displayed in a CSWP is composed of search results that are returned based on the query that is defined in the Web Part. So, when you customize a display template, you are basically customizing how search results should be displayed in the Web Part.

Each display template consists of two files:

  • An HTML file that you can edit in an HTML editor of your choice
  • A JavaScript file

As with master pages and page layouts, you can edit the display template in your favorite HTML editor. When editing the display template, you can focus on HTML, CSS and JavaScript. SharePoint automatically transforms the HTML file into an associated JavaScript file when you upload it. Because the two files are associated, any changes you make to the HTML file will be automatically updated in the associated JavaScript file.

There are two types of display templates:

  • Control display template - defines the overall layout for how search results should be displayed. For example, this can be how you choose to display the HTML for a heading, the beginning and end of a list, or how to page back and forth in a list of results. The control display template is only rendered once in the Web Part.
  • Item display template - defines how each item in the search results should be displayed. For example, this can be how you choose to display an image, and the title of a search result, where the title is displayed as a hyperlink below the image. The item display template is rendered one time for each item in the search result. So, in practice, if ten search results are returned, the item display template creates its section of HTML ten times.

The image below shows how the control display template and item display templates are used on the CSWP of our category page.

Control- and item template in a CSWP

For more conceptual information about display templates, and for details about how to create your own display templates, see SharePoint 2013 Design Manager display templates.

 

How to upload display templates

For our Contoso site, we have four display templates:

  • One control display template for our category page
  • One item display template for our category page
  • One control display template for our catalog item page
  • One item display template for our catalog item page

Because we have mapped our network drive, uploading these display templates is a piece of cake. Simply drag and drop the files into the folder located in Master Page Gallery --> Display Templates --> Content Web Parts. The exact location of where you drag and drop the files, isn’t that important as long as it is in the Master Page Gallery.  However, as the Content Web Parts folder is where the other display templates for Content Web Parts are located, we'll add them there.

Drag and drop display templates

In SharePoint, go to Site settings --> Master pages and page layouts --> Display Templates --> Content Web Parts, and check that the four files have been added. Also notice that an associated .js (JavaScript) file has automatically been created for each display template.

Display templates uploaded

So now we’re ready to apply these display templates to our Content Search Web Parts.

 

How to apply display templates to a Content Search Web Part

We first want to apply display templates to the CSWP on our category page, so let's browse to "Audio."

  1. Click the Settings menu --> Edit Page.
  2. In the Web Part, click the Web Part Menu --> Edit Web Part.
  3. In the Web Part tool pane, in the Display Templates section, to apply the control display template, from the Control menu, select your control display template. In our Contoso scenario, this is Contoso Electronics List with Paging.

Apply Control display template

  1. To apply the item display template, from the Item menu, select your item display template. In our scenario, it’s Contoso Electronics Product gallery.

Apply item display template

  1. Click OK, and then save the page.

Display templates applied

 

Suddenly, our "Audio" page is looking like it has been to one of those makeover shows. Instead of the strange looking gray box, there’s a colorful image that displays for each item, and we’ve also added the price and rating information that was stored in the site columns of our catalog. But it is only displaying three items, so we'll have to do something about that.

  1. Click to edit the Web Part again. In the Number of items to show field, change the value from 3 to 9.

Change number of items to show

  1.  Click OK, and then save the page.

Display templates applied

Now our "Audio" page is looking really good. By using the paging arrows, we can easily browse through the different items in the "Audio" category.

Paging in CSWP

So now that our category page has gotten a Contoso look, the next step is to apply display templates to the CSWP on our catalog item page.

  1. Browse to the catalog item page. In our scenario, we can do this by clicking on the item "Northwind Traders 50W Car Radio" in the "Audio" category.
  2. Repeat steps 1 - 7 in How to apply display templates to a Content Search Web Part above, but select the control- and item display templates for the catalog item page.

 

And now your item details page has also gotten a very nice Contoso look.

Blue car radio item

By using the Color selection menu, we can easily page through the items with different colors.

Orange car radio item

So now our Contoso site is really starting to look good. But looks is one thing. We also have to make sure that our visitors are able to browse and rapidly find the product they are looking for. The next step is to start considering which refiners we want to use on our site.

 

 

Next blog post in this series Stage 12: Plan to use refiners for faceted navigation - Part I

 

 

Additional resources