Display Template is a new technique introduced in SharePoint 2013 in order to modify the look and feel of the search results by making use of HTML & JavaScript instead of XSLT modifications as we did in the earlier versions.

With this new rendering technique or rather framework, SharePoint offers some of the most compelling advantages as mentioned below:

Display Templates Support HTML & JavaScript instead of XSLT (which is often quite cumbersome to work with).

Display Templates based configurations supports a broader scope of execution than XSLT based configurations. (As Display Templates should be defined at Site or Site Collection Scope while XSLT based Templates could only be defined at the WebPart Scope).

Display Template applies Per Item Basis and not Per Result Set Basis (Provides us with the Context of the Current Item which is under execution, so that we can make use of any Managed Metadata Property associated with the Search Result Item and render it as per needs)

As the Display Templates are scoped to Site or Site Collection, they can be used for all kind of results, can be used with in Content Search Web Part, Refiners and so on.

I recommend you to follow this MSDN Article on Display Templates to get an in depth understanding on the topic.

By now we got a fairly good Idea on “What are Display Templates?” and now it is time to see them in action.

Business Scenario:

Additional User Profile Property should be added to User Profile Page which will hold the User’s LinkedIn Profile URL.

There should be a provision to adjust the display position of this Property in Core Search Result Web Part.

Prerequisites:

User Profile Service should be up and running

User Profile Synchronization should be configured

Search Service Application Instance should be configured appropriately

Search Center Site Collection should be configured appropriately

In order to see Display Templates in Action, we need to perform following steps:

SharePoint generates a JS File corresponding to this HTML file automatically, and the JS file should not be modified by the users. This JS file will be maintained and modified by SharePoint system automatically based on the changes you have made in HTML File.

With this we are done with the development of new Display Template.

Create Result Type with Custom Display Template

Now the next step is to create a new Result Type, which will be using our new Display Template to display the Search Results

Go to Site Settings

Click on Result Types

Click on New Result Type

Provide Name to the Result Type

Select Result Source

Select Display Template (the one we have just created)

Save Result Type

We can see the newly created Result Type on Manage Result Type Page as shown below

With this we are all done with development of new Display Template, it is time to test it now.

Test Display Template

Search for the Users and sure enough you will find the new Property appears only for those User Profiles which contains a non-empty value for LinkedIn URL Property.

From the above walkthrough we can conclude the fact that Display Templates are simple but really powerfull mode of customizing Search Result Page as per custom needs.