SharePoint 2013 Result Types

Result Types: Each Search result item render differently. In search result page, whatever renders on the page, it is display on the basis of search result and each control has its own result template like Refiners, Core Result, Search Vertical, Search Box and Hover card.

Each item in a search result page use different "Display Template". Every web part has a option to set result type template. By default SharePoint 2013 comes up with some default list of template.Apart from the search web part there is another web part called Content search web part(CSWP) has its own result template to render the results.

Following are the list of default template that are being used by web part. There are may mores display template but I mentioned the common one. 

• Search Navigation: Search Results Default
• Search Box: Default Search Box
• Core Result (Everyone Search vertical): Default Result
• Refiner control default: Vertical
• Content Search WP : Control template:  List with Paging , Item template: Two Lines 

The good news for developers is that, there is No more XSLT, All template use HTML and JavaScript to render results.

Display Template stored inside the Master Page gallery. http://<SiteCollection>/_catalogs/masterpage/Forms/AllItems.aspx

• Content Web Parts Template (content Search web part template)
• Search (Search Web part template) 

Display Template=  Control Template + Item Template

Display Templates: Display Templates control the which managed property is shown in the search results and how they appear in the Web Part. Each Display Template has two files: an HTML version of the Display Template that you can edit in your HTML editor, and a .js file that is for SharePoint use and should never be modified. CSWP uses combination of two Display Templates, Control Templates and Item Templates to render results.

• Display templates are HTML and JavaScript rather than XSL
• Display templates are configured for the Site and Site Collection rather than for a Web part
• Display templates are applied with rules and logic
• Display templates are applied to individual result items, not the entire result set
• Display Templates are used for Results of all kinds, search results, content by search results, and refiners

Control Template: Control Template provides HTML to structure the overall layout for how you want to present the search results. For example, the Control Template might provide the HTML for a heading, beginning and end of a list. The Control Template is rendered only once in the Web Part.

Item Template: Item Template provides HTML that determines how each item in the result set is displayed. For example, the Item Display Template might provide the HTML for a list item that contains a picture, three lines of text that are mapped to different managed properties associated with the item. The Item Display Template is rendered one time for each item in the result set. So, if the result set contains ten items, the Item Display Template creates its section of HTML ten times.

Creating custom item template.

• I have added new site column name “categories” to document library.
• Add two documents in this library with “Interview” and “Formula” category. Run full crawl as we know SharePoint 2013 manage property creates automatically whenever we creates a new site column and here "categories" column is a site column, therefor we need not create the new manage property. 

• I have checked that the manage property automatically created successfully. 

• Now next steps is to create item template, to display "category" value in search result to do that, I need to create a custom item template.
• You need to map Master page gallery to page (check my Designer Manager Post for publishing sites).
• I have map the "http://<Sitecolllection name>/Search/_catalogs/masterpage/"  URL.

• Once you map the Master Page gallery navigate to "Display Templates\Content Web Parts" folder. Create a another copy of "item_twoLines.html" file with "Item_twoLine_basant.html".

• Edit "Item_twoLine_basant.html" file in my "Notepad++" editor. 
• Add manage property value with same format i.e. 'column name'{column name}:'manage property name'. the actual value is 'Categories'{Categories}:'CategoriesOWSTEXT'. Place this value inside tag<mso:ManagedPropertyMapping msdt:dt="string">.

• Inside <div id="TwoLines"> div, write below mentioned lines. 

var Categories= $getItemValue(ctx, "Categories");

<!--#_

if(!Categories.isEmpty)

{

_#-->

                <div class="cbs-Line2 ms-noWrap" title="_#= $htmlEncode(Categories.defaultValueRenderer(Categories)) =#_" id="Div1">_#= Categories =#_</div>

<!--#_

}

_#-->

                </div>

• The Div render only if the Manage Property has a value.To display the Categories variable to html with same format  _#=<VariableName>=#_. 
• When you save this file the SharePoint background event runs, and it creates the same JavaScript file with name. 

• Now Create test page and Add "Content Search Web Part" (CSWP) .

• Edit Content Search Web part Properties. Under Display template, select display template, for control drop down select "List With Paging" and in item template you will find "basant two lines" that I just created above. 

• Click [OK] to save the configuration settings.
• The item template successfully applied to the web part.
• You will find that the category item now displaying in the search result. 

"Formula" & "Interview" search result.

Please download the template for reference:



Ref: SharePoint 2013 Customize Display Template for Content By Search Web Part (CSWP) Part-1