Why SharePoint Search and why Display Templates?One of main factors that made me migrate to SharePoint 2013 is Search and all the upgrades it brings to the table. In the past, I was often limited to my Site Collection or finding a developer to get something done. The thing is, I don’t code! I am one of those IT guys that got pulled into SharePoint by its massive vortex. Don’t get me wrong, I love SharePoint, but it doesn’t make me a developer. So I am always looking to find ways to build things that are easy to use for me and my Power Users. Why Search? Well I won’t go over the details again as I have in the past, but it was completely revamped, including the FAST technology. What makes it all worth it are the changes to the Search Results Web Part and the new Content Search Web Part. If you want to learn more about those, check out my previous articles as I will assume you know how to build the Query in these Search Web Parts.
- Roll Up Sites using Search
- Content Search Web Part
- Recording of step by step to Cross-Site Publishing and Catalog Features
- Content Search Web Part Site Portal
Start building the Control Display Template for our SharePoint menuI hope this article will help you build more Display Templates in the future. Personally, I asked my colleague Yohan, author of Image Slider with SharePoint 2013 Search Results Web Part to help me get started. I went to Codrops and downloaded the source files, all of them. Of course, the menu there is not made for SharePoint at all, which means we’re going to have to do a lot of changes for this to work in our context. I’ll look at the index.html using my browser and you’ll notice that there is a lot of extra stuff we don’t need. They did that plugin to showcase how to do it and for the regular web, SharePoint already codes with tons of CSS.
Editing the Item Display Template for our SharePoint menuThis is where all the magic happens, the first thing we absolutely need to do is tell SharePoint what Managed Properties we plan to use in this Display Template. So under your ManagedPropertyMapping in the <head> of your Item Display Template, make sure you enter the name you want to use with the Managed Properties that will be assigned to it. By default, we already have a few like Title and Path. The next thing I did was create variables, though it wasn’t necessary it makes it easier when writing our template. All I really did is copy the <li> section of the HTML file and change the fields for the hyperlink and span to variables returned from the Search Results using Managed Properties. Let’s upload this to the same location as our Control Display Template under _catalogs/masterpage/Display Templates/Search/. And we’re done! Now, wherever you add the SharePoint Search Results Web Part, you will be able to change the way results appear to make them like the menu we’ve built. Here is our result:
If you haven't tried our popular SharePoint migration tool yet, what are you waiting for? ShareGate Desktop's UI isn't just simple and intuitive—it'S actually pleasant to use (really!).
Migrate to SharePoint or Office 365 quickly and easily, with best-in-class migration for all versions of SharePoint, unlimited data, and custom reporting. And effortlessly reorganize and restructure your content until it's exactly how you want it.
Save time and migrate with total peace of mind, then get back to business as usual. See for yourself with a free, full-featured 15-day trial.