It’s another hot and rainy day here in Atlanta. It’s a good thing I have the beta to keep me inside!
Search Result Types
The improvements in Search in 2013 are incredible. Among the improvements is that SharePoint displays a hovercard when you mouse over a result.
If I had an Office Web Applications server installed, this hover card would also include an interactive thumbnail of the document itself so I could look at it without opening it!
The Manage Result Types page lists all of the types with specific rendering. Each has rules that when true cause an item to use the given template and the order determines which rules get checked first. SharePoint applies the first match it finds. For the rest of this post I will use the Microsoft Word template.
The Microsoft Word result type specifies that
will format the results for Word docs.
In my example I am using a document that has sections. The amazing new search indexer extracts that information from the document and displays it in the hovercard under the heading ‘Take a look inside’.
The rendering instructions for Word item hovercards is in the same location as Item_Word.js and its name is Item_Word_HoverPanel.js. I can edit this file with SharePoint Designer 2013, but in the grand tradition of SPD the way it’s done is a bit goofy. If you try to navigate to the folder that contains the templates through Master Pages in the Navigation pane it will say there are no files there, but you can get to them via All Files.
I am going to edit Item_Word_HoverPanel.js and add an inline style to change the color of the Take a look inside heading. Remember kids, inline styles are only good in simple demos! In real life use a style sheet!!!
If I refresh my search results and check the hovercard I can see it worked.
You can examine Item_Word_HoverPanel.js to get an idea of what is going on here, but there is a better way.
Design Manager: Edit Display Templates
Publishing sites provide an amazing new feature called Design Manager. Many people are writing about it so I will skip the high level discussion and get right to the point! But first, have some links:
Open the file and edit it. You will immediately see that the template is much easier to follow than the straight js version. Pay special attention to ctx object – it is the key to custom rendering. You can see that ctx gives access to the current item and that it provides methods for rendering via:
I edit the file as follows:
And the result looks like this:
Conclusion – Letting SharePoint do Some of the Work
If I use the script debugger of my choice, in this case FireBug, I can see the resulting script.
Pretty cool eh!? I could then use this template in my Team site as desired.
This tutorial has barely scratched the surface of client rendering. As of this writing the SDK still isn’t out, but fortunately I had the unfortunate circumstance to reverse engineer much of the list rendering in 2010 so I will keep writing about it over the coming months until we get some good documentation. This stuff is important enough that I expect we’ll see some decent materials on the subject in the SDK.
Author: Doug Ware