SP2013 Search Display Templates Semi-Deep Dive - Perficient Blogs
Blog
  • Topics
  • Industries
  • Partners

Explore

Topics

Industries

Partners

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

item1

Hover Panel Display Rendering

item2

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

Leave a Reply

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

Subscribe to the Weekly Blog Digest:

Sign Up