Share via

Customize search results look by using result types and display templates in SharePoint 2016 or SharePoint 2013

  • Article

Introduction

Hi folks. Today we are going to discuss a little about display templates in SharePoint Server 2013 as an intro and then in Part II we’ll modify and show you guys the output of my Search page. So let’s just jump into the topic. Display templates are templates used in Web Parts that use search technology (referred to in this article as Search Web Parts) to show the results of a query made to the search index. Display templates control which managed properties are shown in the search results, and how they appear in the Web Part. Each display template is made of two files: an HTML version of the display template that you can edit in your HTML editor, and a .js file that SharePoint uses.

Description

You can navigate Display Template by below URL just replace yours

E.g.- https://onlysharepoint2013.sharepoint.com/sites/Bhawana/\_catalogs/masterpage/Forms/AllItems.aspx

http://www.enjoysharepoint.com/pc/Sharepoint_2016_result_source_customization.png

Under Search you can find two template files starts from Control and Item, again divided into .html and .js. So Search result page when we are looking .html will contain all design related elements like the table, divs, panels like that and in a .js file all related scripts used in .html.
 

http://www.enjoysharepoint.com/pc/Sharepoint_2016_result_source_customization_1.png

http://www.enjoysharepoint.com/pc/Sharepoint_2016_result_source_customization_2.png

 
So if you want to customize your search result page below are the elements and controls we need to take care. And based on our need we can alter, remove, hide, and update. In fact, we have full control over the elements visible on this page. Also, we can restrict the audience by viewing and accessing the search contents.
 

http://www.enjoysharepoint.com/pc/Sharepoint_2016_result_source_customization_3.png

http://www.enjoysharepoint.com/pc/Sharepoint_2016_result_source_customization_4.png

Reference & Useful URLs

If you want to learn about AngularJS and RestAPI, follow articles:

Conclusion

Hope this article will be helpful where we have discussed How to customize search results look by using result types and display templates in SharePoint 20106 SharePoint 2013 or SharePoint 2010. We will see further in next articles.