This is a blog post in the series "How to change the way search results are displayed in SharePoint Server 2013." To demonstrate how you can customize your search results, I'll use examples from an internal Microsoft Search Center.

For an overview of the blog posts in this series, go to How to change the way search results are displayed in SharePoint Server 2013.

In the previous blog post, I introduced you to the Search Center example I am using in this series, and explained how you can create a new result type. In this blog post we'll learn:

 

How to display a custom icon

In a previous blog, I showed you how the icons Word, PDF and Excel are displayed for each search result. In my Search Center scenario, I wanted to add the following custom icon next to all search results that belong to the newly created TechNet content result type:

To display a custom icon for search results, here's what you should do:

  1. Add the custom icon to a SharePoint library.

    In my Search Center scenario, I added the custom icon to the Images library.

Icon in Images library

  1. Open the item display template that is referenced from the result type for which you want to display a custom icon.

    In my scenario, this was the TechNet content file.
  2. In the item display template, modify the value for ctx.CurrentItem.csr_Icon so that it points to the custom icon.

    In my scenario, I also removed the if statement, if(ctx.CurrentItem.IsContainer).

ctx.CurrentItem.csr_Icon points to custom icon

  1. On a search page, enter a query that will trigger the new result type.

    In my scenario, I entered "result type."  Search results that are TechNet publications now have a custom icon next to them. Great!

Custom icon displayed in search results

So users of our search center could now easily distinguish the search results that had been published on TechNet. However, I also wanted to add information from custom site columns so that users could see important information about each search result without having to click on it.

At the start of this series, I explained that site columns are “transformed” into managed properties during crawl. I also explained that only managed properties that are listed in an item display template can be displayed in search results. So, to display custom information in your search results, you need to add managed properties to an item display template. Hence, the next thing you should do is find the managed property name that corresponds to the custom site column that you want to use.

 

How to find a managed property name

Before you start searching for a managed property name, it’s important that you know a bit about the naming convention for managed properties. For more information about this, see Automatically created managed properties in SharePoint Server 2013.

Depending on your permission level, you can search for managed properties from three places:

Permission level From where you can search
Search service application administrator Central Administration --> Managed Service Application --> Search Service Application --> Search Schema
Site collection administrator Site Settings --> Search Schema (in the Site Collection Administration section)
Site collection owner Site Settings --> Schema (in the Search section)

To save space, I will only show you how to find a managed property name as a Site collection administrator.

Here’s what you should do:

  1. Go to Site settings --> Search Schema.

Search Schema on Site Settings page

  1. On the Managed Properties page, in the Managed property field, type the name of the site column that you want to find the managed property name of. Remember that managed property names don’t contain spaces, so if your site column name contains a space, leave it out.

    In my scenario, I wanted to find the managed property name for the site column Content Summary. I entered ContentSummary in the Managed property field, and clicked the green arrow icon.

Search for ContentSummary

One search result was returned: ContentSummaryOWSMTXT.

ContentSummaryOWSMTXT returned as search result

Since the Content Summary site column is of type Multiple lines of text, I knew that this was the managed property name that I wanted to use.

  1. Repeat the steps from this procedure to find the names of all of the managed properties that you want to display in your search results.

So now that you have found the names of the managed properties that you want to show in your search results, the next step is to modify the item display template.

 

 

How to modify an item display template to show values from custom managed properties - option 1

As I explained in the previous blog, there are different ways you can go about modifying an item display template to show values from custom managed properties. The first option I'll show you is very simple (I’ll cover the second option in the next blog). It does not include any if statements, and hit highlighting is not applied.

Here's what you should do:

  1. Open the item display template that belongs to the result type for which you want to customize search results.

    In my scenario, this was TechNet content.
  2. In the item display template, in the ManagedPropertyMapping tag, use the following syntax to add the custom managed properties that you want to display:
    '<Current item property name>':<Managed property name>'

    In my scenario, I wanted the values from the managed properties ContentSummaryOWSMTXT and owstaxIdTechnicalSubject to be displayed in the search result. To make the file easier to maintain, I named the current item properties the same as the managed properties.

Two managed Properties added to display template

  1. Inside the second <div> tag in the <body>, use the following syntax to add code that will display the value of the custom managed property:
    _#= ctx.CurrentItem.<Current item property name> =#_

    In my scenario, I added the following to the item display template:
    <div>_#= ctx.CurrentItem. ContentSummaryOWSMTXT =#_</div>
    <div>_#= ctx.CurrentItem. owstaxIdTechnicalSubject =#></div>

Add properties so that they display in search results

  1. Save the item display template.
  2. NOTE: You do not need to do this step if you are using SharePoint Online.
    Go to Site settings --> Search Result Types. Notice that a Property Sync alert is displayed.

Property Sync alert displayed

This alert is displayed because we added managed properties to an item display template (what we did in step 2). To update the result types with the newly added managed properties, click Update.

Update managed Properties from result types

IMPORTANT! If you don't do this update, the newly added managed properties will not display in your search results.

After I made this change, when users entered a query in our Search Center, both the value of ContentSummaryOWSMTXT and the value for owstaxIdTechnicalSubject were displayed in the search results.

Values of custom properties displayed in search results
But even though two custom properties were now displayed in our search results, I wasn’t quite happy with the result. For example, I wanted to display the two custom properties between the title and the link, and not below the link as was currently the case.

To better understand why the search results were displayed the way they were, let's take a closer look at the customized item display template:

How the display template displays content

  1. ctx.CurrentItem.csr_Icon points to the location of my custom icon. This variable is used by the Item_CommonItem_Body display template.
  2. _#=ctx.RenderBody(ctx)=#_ calls the Item_CommonItem_Body display template (remember, I talked about this in an earlier blog post). The Item_CommonItem_Body display template displays the custom icon, title and the link to the item.
  3. _#= ctx.CurrentItem.ContentSummaryOWSMTXT =#_ and _#= ctx.CurrentItem.owstaxIdTechnicalSubject =#_ display the values of the two managed properties, ContentSummaryOWSMTXT and owstaxIdTechnicalSubject.

To display the custom properties between the title and the link, you could simply take the Item_CommonItem_Body display template out of play by deleting the reference _#=ctx.RenderBody(ctx)=#_ from your custom display template. You could then add the properties in the order that you want them to display, for example like this:

Reference to _#=ctx.RenderBody(ctx)=#_ has been deleted

The search result would then look like this:

Search result displayed without Item_CommonItem_Body reference

By working a bit more on the styling, you could have a good enough result. However, by deleting the reference to _#=ctx.RenderBody(ctx)=#_ ,the Item_CommonItem_Body display template is no longer used to display results. The Item_CommonItem_Body display template contains some functionality that will automatically improve the relevancy of your search results. So, before you delete the _#=ctx.RenderBody(ctx)=#_ reference, you should consider if automatically improved relevancy is something that the users of your search site would benefit from.

 

About click tracking and automatically improved relevancy

The Item_CommonItem_Body display template contains an onlick method that tracks the click behavior of users. This tracking has an impact on the relevancy of search results. For example, a search result that is often clicked by users will automatically be displayed higher up in the search results. 

IMPORTANT: If you want your search results to receive automatically improved relevancy based on the click behavior of users, do not delete the reference to _#=ctx.RenderBody(ctx)=#_ from the item display template!

In the next blog post, I will show you how you can keep this reference, display custom properties between the title and link in the search results, and also apply hit highlighting to your custom properties.

  

Next blog post in this series
How to display values from custom properties in search results - option 2