I know what you’re thinking – another SharePoint Display Template. The irony is, I actually started off doing something else. But somehow, I keep going back to building SharePoint Display Templates.
The way I see it, yeah SharePoint is a great platform to store your content and organize it in lists using Metadata, but you still have to put some effort into displaying the content for the end user to consume. In this article, I took another sample design found online and turned it into a Display Template for you to use and reuse in SharePoint or in Office 365.
What Will the Display Template Do?
For inspiration, I went to one of my favorite web design sites and found an article that I liked.
What I enjoy most about this website is that it isn’t influenced by SharePoint- the sky is the limit. Different contributors share their creations, provide a live demo, and allow you to download the source code, alongside a tutorial explaining how they built it. It’s really a great community.
Here are some other Display Templates I created with the help of this website. All of them work both for SharePoint On-Premises and Office 365.
- Reusable Animated Slider
- Corporate Directory using Search
- SharePoint Tiles with full-screen page
- Animated and responsive SharePoint Tiles
- An image viewer with SharePoint Display Templates
Though you can still see the concept of tiles, today I’m trying something a little different. The idea is to provide an image that reveals the required information when you hover over it.
This means that the images used have to adequately represent the content you want to use in this Display Template, in order for the end user to recognize, at a glance, what information will be revealed. Otherwise, a quick fix is to change the HTML and make it show the content title directly on the image.
I initially wanted to use this design in a Blog Post Roll up but, as you can imagine, I have little to no control over the images in a user’s blog post, and some did not provide one at all. So it didn’t make sense for me to use this Display Template, it would have been bad UX. That’s why it’s important to properly gauge when this type of design is effective, or when it isn’t.
Dissecting the Design Before Converting It to a SharePoint Display Template
The first thing I do when I download an HTML web design that I plan to convert to a SharePoint Display Template is to separate the code into two categories.
- First is the HTML that is global- meaning it isn’t repeated for each individual item that will come out of the search results in SharePoint. A good example of this is the UL tag, before the LI in a list.
- Once I’ve separated that, I am usually left with the HTML to render each of the items. In other words, the code I will have to repeat as many times as there are items in the search results.
This will help me know and separate what goes into the Control Display Template (elements that aren’t repeated), and the Item Display Template (elements that are repeated with each result).
Once that’s done, all I have to do is make sure the CSS and JS files are loaded and add the Managed Properties that I want to replace some of the HTML properties with. An example of this would be to replace the URL that links to a specific picture in the HTML design, to the Managed Property that contains the URL linking to a picture in the search results.
Using the Caption Tiles in SharePoint or Office 365
As always, for the purpose of this example, I’ve uploaded and pointed the JS and CSS files in the Style Library. This is not necessarily a best practice, feel free to upload the files wherever you prefer, but don’t forget to change the references to them in the Display Templates. These will work for both the Content Search Web Part and the Search Results Web Part.
I always recommend using the Content Search, if you can, because it allows the Site Admins to change the Managed Properties used in your design as they see fit, without having to go back and edit the templates.
Regardless, you can upload the files in the right location, as specified in the download below, and you will be well on your way to using it both On-Premises and in Office 365.
It’s one thing to use SharePoint to store your content, it’s another to help your users navigate and consume it. Just like any website you visit, the owners won’t make you search for the content in their databases, they’ll create the best experience possible for you to see and interact with it. The same rules should be followed when designing and managing a SharePoint environment!
