Skip to main content


SP2013 Search Display Templates Semi-Deep Dive

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


Thoughts on “SP2013 Search Display Templates Semi-Deep Dive”

  1. 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.

  2. 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).

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us