How to Create Horizontal Search Facets in SharePoint

Platforms
14 November 2016

In this post, I will explain how to set up sorting for SharePoint search results web parts then show you how to manipulate the out-of-the-box functions to display the sort dropdown in any way you see fit.

Note: This blog post will require basic knowledge of Managed Properties and Display Templates in SharePoint. If you are unfamiliar with these, there is a great Microsoft article on Managed Properties here: and another on Display Templates here.

facet1

The standard search results web part has a built in functionality that allows users to sort search results based on managed properties. In the properties for an out-of-the-box search results web part expand the “Settings” section and select “Show sort dropdown”. This will add a sort drop-down at the top of the web part. Just under that you will see a section for “Available sort order (JSON)”. Here is where you can add managed properties to sort by.

Adding managed properties follows a very simple format:

{"name":"Date(Newest)","sorts":[{"p":"Write","d":1}]},

-        Name: this is the display name of the managed property. Whatever you type in here is how it will display in the dropdown.

-        p: this property is the actual name of your managed property. It needs to match the managed property exactly. You can use any out-of-the-box managed property that is marked ‘Sortable’. You can also create your own managed property, or map your crawled property to any of the RefinableString, RefinableDate, or RefinableInt properties.

-        d: this property tells the sort to be Ascending or Descending. 0 is Ascending. 1 is Descending.

That is the basics of sorting SharePoint search results. However, this option only allows for a dropdown on at the top of the results web part. But what if you want this same functionality in a different presentation? For the purpose of this post, I will show you how to turn that dropdown into clickable links like this:

facet2

I’m going to accomplish this by using the same JavaScript functions as the out-of-the-box solution, and adding them using a display template.

The first thing to do is to make a copy of the Control_SearchResults.html display template. This way you can make any edits you wish without touching out-of-the-box templates. The easiest way to do this is to open your site in SharePoint Designer. Navigate to All Files > _catalogs > masterpage > Display Templates > Search. Then find Control_SerachResults.html, make a copy, and rename it to something that makes sense to you.

Next, in the first section of javascript, add the following code:

        var availableSorts = ctx.DataProvider.get_availableSorts();

        availableSorts.push({"name":"ArticleDate-ASC","sorts":[{"p":"RefinableDate00","d":1}]});

        availableSorts.push({"name":"ArticleDate-DES","sorts":[{"p":"RefinableDate00","d":0}]});

        availableSorts.push({"name":"Relevance","sorts":[]});

        ctx.DataProvider.set_availableSorts(availableSorts);

First this gets the different sorting options. Then we will push all of our new sorting options. Then we set them for use. Note: in this case I have ArticleStartDate mapped to RefinableDate00.

For each managed property you would like to add, simply create another push line.

        availableSorts.push({"name":"ArticleDate-ASC","sorts":[{"p":"RefinableDate00","d":1}]});

Remember to update the name, p, and d parameters.

Now to use these new sorts, you will need to call a function based on the sorts you have created. The function that does this is:

$getClientControl(this).sortOrRank('ArticleDate-ASC');

Simply replace the green text with the “name” parameter from the different sorts that you added.

And that’s all there is to it. The full code for the three links I created is:

facet3

Now you have full control to add any classes or ID’s to make this easy to style. I placed the HTML outside of the of the  ‘<div class="ms-srch-result" id="Result" name="Control">’ tag so it would be at the top, but you can place it wherever you’d like inside the template.

When you are finished, simply publish the new display template and apply it in the web part properties. You can also now uncheck the box that says “Show sort dropdown”. This will remove the dropdown from the page but your functionality will remain.

Loading Next Article