Recently I have done a lot of work with SharePoint 2013. one of the new features in SharePoint 2013 is Display Templates. At first I had to get used to it but I’m starting to really like the idea of them.
Data vs. Presentation
In SharePoint a lot of information is stored in many lists, sites, site collection, applications and User Profiles. In previous versions of SharePoint it wasn’t easy to present data from one site collection in another site collection. Now there are two web parts available to present search results. Content Search Web Part and the Search Result Web Part.
Both of the web parts use their own display templates. It’s a bit annoying that it isn’t possible to move a display item from one web part to another. I found a couple of time that I started using the Content Search Web Part and later decided to use the Search Results web part instead.
Next to the presentation of the result there are a few more web parts that use display templates. One of those web parts is the Refinement web parts where it is possible to present different columns with different refinement display templates.
What do display templates look like?
There are two files for each display template. a .html and a .js file. you will need to upload the .html and SharePoint then translates this into a .js file. Easy! Make sure that you publish the .html when you want the html to be available for other people to use on the site.
When to use a display template?
I have found recently that there is a lot more opportunity to use the Search web parts than I would have thought initially. I used to add the Site Contact web part to a page. However it is a lot more flexible to add a search web part. Presenting the persons photo, contact details in the way I want it so much easier with a display template rather than a Site Contact Web part which isn’t very flexible.
So how does it work?
I’m assuming that creating a page and adding some web parts is an easy task and therefore I will ignore that step.
On my page I have added a Search box, Search Results and a Refinement web part.
Within the Search Results web part I’ve set up a query so that I’m getting results back from a single list using the following query text:
{searchboxquery} ContentType:Submission Path:https://intranet.mydev.local/sites/subsite
Now the next step is to have a look at the web part properties of my search results web part. The Default Result display template is used.
The results shown by this template are pretty basic but it’s a start.
How do we now modify this template? Go to Site Settings -> Master Page Gallery and open the Display Templates Folder.
Now there are 6 different types of templates folders
- Content Web Parts
- Filters
- Language Files
- Search
- Server Style Sheets
- System
It’s easy to add new templates to each folder. simply copy an existing one rename it and upload the new one and off you go. I found that I end up trying to find my templates back. Creating a new folder named after my customer makes life a lot easier. It actually doesn’t matter where you’re template lives as long as it is in this library.
As you can see above there are different types of templates for the search results web part:
- Control
- Item
- Group
The Control templates manage all the search results return
The Item templates control each item that is returned and Group will sort out the grouping of the items.
So first of all create a copy of the Default Result control display template (It helps to add the Title field to the Master Page Gallery as this will match the name of the template displayed in the web part). The Default Result template matches the template with the file name Control_Searchresults.html. Download a copy and rename the file. Then open the renamed file in an editor.
Find the following line:
<title>Default Result</title>
and replace the title.
make the changes to the display template to make things look the way you want and upload and publish the new display template.Then finally select the template in your Search results web part and all is done.