If you’ve stumbled around display templates in SharePoint 2013 Search, you’ve probably run into these following JavaScript do-dads:
- ctx.RenderBody(ctx) -> (standard search results Display Template)
- ctx.RenderBody(ctx) -> (hover panel Display Template)
- ctx.RenderFooter(ctx) -> (hover panel Display Template)
- ctx.RenderHeader(ctx) –> (hover panel Display Template)
You can find these methods on items such as Item_Default.html, Item_PDF.html, Item_Word.html, and their corresponding hover panel Display Templates.
So what exactly is being rendered? For this we need to take a look at the following files. You can find these at Site Settings –> Master Pages and Page Layouts –> Display Templates –> Search
- ctx.RenderBody(ctx) –> Item_CommonItem_Body.html (standard search results Display Template)
- ctx.RenderHeader(ctx) –> Item_CommonHoverPanel_Header.html (hover panel Display Template)
- ctx.RenderBody(ctx) -> Item_CommonHoverPanel_Body.html (hover panel Display Template)
- ctx.RenderFooter(ctx) -> Item_CommonHoverPanel_Actions.html (hover panel Display Template)
So what does this mean exactly?
If you modify Item_CommonItem_Body.html, you will change the look and feel of any Display Template that calls ctx.RenderBody(ctx). The same idea goes for the other xxxx_CommonItem_xxxx Display Templates. If you don’t feel that OPEN, SEND, and VIEW LIBRARY are clear enough for your user, you can change the html in Item_CommonHoverPanel_Actions.html to whatever you want or add links of your own.
So if you need to change the universal look and feel of your items, look at modifying the CommonItem html files. While I’m not a fan of modifying a crucial OOTB file, certain platforms such as SharePoint 2013 Online might not have any options. For on-premise SharePoint 2013, I’m still looking for an option somewhere such as PowerShell to change the default Item_CommonItem_Body file to render.
Stay tuned for an upcoming blog on how to glue together your own custom Item Display Template so you can show your custom result types.
Some visuals:
Result Display Rendering
Hover Panel Display Rendering
Hi, great explanation. So i have a question. Where would i change the style or the behavior of ctx.RenderHeader(ctx) for the item_default.html? Specially Title’s behavior.
I know that i can change the style from the html, but i want to know if i can go deeper.
Thanks in Advance.
I’ve found Item_CommonItem_Body.html, now the cuestion is… its a good practice change this?
Thanks.
Hey Sharop,
Please check out my next blog for information that you’ll need to edit your item_default.html display template. Make sure you back up that guy first before making any sort of edits. Link: https://blogs.perficient.com/microsoft/2013/02/sp2013-search-dyi-display-template/
I would consider it NOT best practice to edit Item_CommonItem_Body.html unless you absolutely know that all of your search results need the change.
Thanks for reading!
Will
Of course, let me know if you have any questions!
Hi, excellent post. Thanks a lot. I have one question: I want to make a change to all the search results(displaying the name along with file title). Is there a way other than modifying the Item_CommonItem_Body.html. (I cannot select a custo display template to display the search results, I’d have to select the option “Leave it to Result Types to select the display template in Search web part settings).
I would call this more of a ‘skim the surface’ than a ‘semi-deep dive’.