Modification of Search Result Web Part in SharePoint 2013

One of the important features in the SharePoint success story is search. It has been extensively used, modified and configured to a business’s need since its inception. With time and versions, search has modified a lot.

Back in 2010, default search was not very powerful for business purposes. In response, SharePoint 2013 FAST search has now been integrated with the default search, with a configuration that is also minimalistic in nature. In addition, where SharePoint 2010 required developers to modify XSLT to customize search display and results, SharePoint 2013 accomplishes customizations through search display template.

The Search Display Template

By default, the Search Results Web Part in Search Center is set up to use different display templates according to the result type of the search result. Result types define when to use which display template, and the display template defines what information to show in the search results. For example, there is separate a display template for PowerPoint files and another display template for Word documents. A result type says that if the search term is found in a PowerPoint file, then use the PowerPoint display template when showing that result.

Search Results Web Part has three main types of display templates:

  • Control display templates – high level structure of the presentation of result. It contains the things “around” the individual results, such as a heading, numbering, next and previous page buttons, and a “no results found” message
  • Item display templates – this defines how individual results are displayed
  • Hover panel templates – as the name suggests, it takes care of the hover display of the search result

Customized templates can be created by modifying these three areas.

Default display templates

Navigate to Master pages -> Display templates -> Content Web part, and find the list of templates already available. Under Content Web Parts Library there are several file names starting with “Control” and “Item_”. Files starting with Control are Control Templates and files starting with Item are Item templates. Also there are two file extensions for each file type: .html and .js.

The .js is strictly for SharePoint internal use and not to be changed by users. Developers are supposed to update .html extension and SharePoint will automatically update .js based on changes made to .html.

In the control template we have the following sections that we can modify to customize:

  • Header Properties – This section has Display Template header properties that provide information to SharePoint about Display Template, <title> will be displayed under CSWP Edit Properties to choose from
  • Script Block – This section is used to reference JavaScript and CSS files
  • DIV Block – Following the <script> tag is a <div> tag with an ID. By default the ID for this <div> tag matches the name of the Display Template file. The HTML or JavaScript we want the display template to render, must be included inside this <div> tag

Points to Note

  • Any JavaScript Code should be inside  <!–#_ <JavaScript Code> _#–> – This is used by SharePoint internal logic to put it appropriately in the .js file
  • Variables are used with _#=   example: <a  href =”_#=LinkURL=#_”>
  • In Control Template  _#=ctx.RenderGroups(ctx) =#_
  • For CSS styling, wrap _#=ctx.RenderGroups(ctx) =#_ with a div and apply css style, this will style all items coming from Item Template. Note that the outer most <div> with ID matching template title will never render in HTML, so be careful not to apply style to outer <div>or it will never reflect.

Display item templates also have a similar structure and can be edited using similar approach.

Choosing Your Template

Which template to update is purely a business and design decision, and will vary from case to case. It may be a requirement that you modify both.

It looks a little complex at the start because of heavy dependency in syntax, but once started it becomes easy and interesting. So pull out the existing templates, copy them and start modifying in your own style. Through this you will leverage the rich and robust SharePoint search functionality with a cool customized look.

January 11, 2016