A Slick Display Template for Your SharePoint

It’s no secret that I am a fan of search driven SharePoint solutions, though not necessarily an expert in it. And if there is a way to build something once and have it work for different scenarios then you can count me in.

With SharePoint Search anything is possible, you can take a simple list and make displayed as a cool animated and responsive menu somewhere else. In this article, I show you how I created a new Display Template for the SharePoint Search Results.

Here is what we will build today:

The basics of SharePoint Search and Display Templates

Ever since SharePoint 2013, I’ve been throwing myself into Search based solutions. What does that mean? Well, instead of building things directly the way I want them in a site, I’ll let the authoring of content happen without any hassle in simple Lists and Libraries. Then leveraging the SharePoint Search to display these items however I wish somewhere else.

But first, you need to be sure you understand how search works in SharePoint and more importantly know how to work with Crawled and Managed Properties. Otherwise, you’ll be able to download this reusable design today but won’t be able to make any changes.

Here are some useful links to get you started or refresh if needed before you begin:

• Understand SharePoint Crawled and Managed properties for search
• The Content Search Web Part to Display SharePoint Subsites
• What is the SharePoint Product Catalog

And when you have found what you are looking for and are ready to display the results on a page, you can use what SharePoint calls Display Templates to show them how you want.

Essentially Display Templates are just that, templates of design that are reusable and will work with any type of results you get out of SharePoint search.

If you want to learn more, visit my page on learning SharePoint and scroll down to Display Templates. There you will find a downloadable slider as well as an animated responsive menu. It also includes the step by step on creating them if you’re feeling adventurous today.

Getting the SharePoint list or library ready

We need to make sure we have the right kind of data for what we want to build. In this case, we are building an animated menu that uses images as backgrounds, some text used as the title and a small description that appears below.

So for this you can create anything you like in SharePoint as long as you have two text fields you are willing to use and an image link. When I say text, it includes any kind of text including that which was captured through a choice column or date and time. The beauty with Display Templates is that they are reusable and work with almost anything. So get your list or library ready.

Myself, I created an Image Library because I planned to upload the images directly and plan on leveraging the built-in columns of Title and Description as my two text fields.

Of course, you don’t have to use an image library nor do you need to upload the images in your SharePoint. All you really need is a column where people store URLs to images.

Because these are Site Columns, I won’t have to go manually create the Managed Properties for them, so I can launch a Search Crawl and go straight to building my Display Template.

Quick look at SharePoint Display Templates

Now to take what’s in this document library and show it the way I want somewhere else, I’ll need to build a Display Template. Though I prefer the Content Search, it’s only available in some Office 365 Plans and on SharePoint 2013 Enterprise. So to be sure everyone could download and use it, I made sure it works both on the Search Results and Content Search Web Part. A big thank you to Elio Struyf for helping me out with this and making it work with the dreaded Minimal Download Strategy feature.

Display Templates are actually split into two different files, the Control and the Item.

Control Display Template

This is the part of your design that does not get repeated as each items gets loaded in the Search Results. It’s the container around and where you refer to any custom CSS or JS files you may want to use.

Put simply, it’s the box where search results will be loaded.

Item Display Template

This is where you design how each item will look like and which managed properties from the result item will be used and where on the design. If I take my example above, that’s all in the Item Display Template. The size of the rectangle, where the Title goes and where the Description goes as well as the animation itself.

In other words, you put here how you want each result to look like.

Building a new SharePoint Display Template

Did I mislead you in believing I created that entire design myself? No I am not that good, simply got inspired from a great tutorial. That’s what I love about SharePoint Search and the new Display Templates! Anyone can build them really, even I can.

Obviously the article doesn’t talk about SharePoint whatsoever and this is merely an HTML, CSS and JS design that works standalone. First, we need to get prepared by uploading the assets in our Style Library. The CSS files, JS files and anything else you might need. You can put them anywhere but it really is what the Style Library is for.

(can you tell I used Sharegate to upload all my files, the modified dates go back to 2013)

So how do I turn it into a reusable design in SharePoint?

Well I looked at their demo HTML file and analyzed how it was built to identify what would go in the Control Display Template and what would go in the Item Display Template.

Quickly I noticed that all I needed was the DIV set as the container and the SECTION where each individual item is then added. Also saw that each of those rectangle items is actually a hyperlink with a FIGURE stored inside of the anchor tag.

What I needed to do now, is split those items apart in their respective Display Template. Everything that gets repeated for each Search Results goes to the Item Display and everything that doesn’t goes in the container Control Display Template.

My Control Display Template

Nothing really, if you look past all the SharePoint stuff you’ll notice that all I have is a div and a section followed by the command that tells SharePoint to render the individual items in this location.

I also pasted the script they had in there, but under a post render action to make sure it waits for all of it to be loaded first.

My Item Display Template

You always have to start with a DIV in Item Display Templates but it doesn’t actually render it, so no worries. All I had to do is put the HTML for each item and replace the text values they had by my SharePoint Managed Properties.

To make it easier for me in the future, I created variables for these Managed Properties so I can change them easily without modifying the actual HTML of the design.

Configuring the Search Results with your Display Template

Obviously after all that, I need to make sure this will work with the Image Library I’ve set up. I added the Search Results Web Part on my home page no less, you might want to create a new page for this, but I like to live on the edge.

Once added on the page I clicked on Edit Web Part and Change Query to tell the web part what I wanted from the Search Index.

I want pictures from this specific URL – That Simple!

Then I selected the right Display Template that we just build from the Web Part settings.

And Voilà!

Take your SharePoint Search to the next level with Display Templates

You can do ANYTHING you want! With this Display Template, you could decide to show a menu to be used as a table of contents by replacing the images with icons. You can show profile pictures with their name and short description or list customers with their logo, etc…

The whole idea behind a Display Template is that it is completely reusable with any of your SharePoint Search Results. Whatever comes out of your Search, as long as it a link to an image in there you should be good.

I’d love to see how you use this so don’t be shy in posting pictures.

However, I will say that this isn’t for you to take directly into production or use at your own risks. I am not a pro developer and simply took a design online and converted it to SharePoint Display Template.

Download the files

Unzip this file and put it in your Style Library. Except for the two HTML files at the root which are the Display Templates. You need to put those in your Master Page Gallery under Display Templates or a folder of your choice.