Custom Document Search Experience (Display Template)

When it comes to the search experience, the look-and-feel of the search results are always a big question. In most cases, the out-of-the-box “ten blue lines” experience is not enough, creating custom Display Templates is almost always required.

Let me focus on the customization of the result set UI in this post, and not to talk about the optimization and tuning of the results.

The most popular UI customizations are always simple yet powerful. In my experience, changing what metadata is displayed is always a must. The next most important need is to display (visualize) the type of the result. Also, I get more and more requests to change the user experience to be “tile-based.”

This is what led me to create a simple Display Template which changes the result set to be more visual, more user-friendly.

You can download the Display Template and the required file type icons HERE:

Download the Display Template

How to apply the Display Template?

To apply the Display Template on your SharePoint 2013/2016 or Office 365 site, follow these steps:

• Upload the Display Template to the current site’s Master Page Gallery / Display Templates / Search.
• Go to your Search Center, and open the proper search result page.
  (Bonus: to create a documents only search page, edit the Query on the Search Results web part, and include a filter for IsDocument:1.)
• Click Settings / Edit Page.
• In the Search Results web part, click the Web Part menu / Edit Web Part.
• In the Web Part tool pane, in the Display Templates section, to apply the item (document) display template, from the Item menu, select your item display template uploaded above.
• Click OK and save your page.

Now, you should see your documents displayed by the new Display Template:

Question? Feedback? Please don’t hesitate to let me know in a comment or by e-mail.

 

Related content:

• Display Template for Tasks in SharePoint 2013 and Office 365

Save

Save