As you may already know and seen, there has been quite a lot of improvements to create or change UI elements from SharePoint 2013, especially UI objects of search.
A topic that I wanted to blog about for quite some time now (first time I started this post was in April) will show you how to create your own custom refiner display templates.
Configuring these refiners can be configured by some clicks in the SharePoint Search UI and is described multiple times now on blogs (Step by Step configuration to Add custom Refiners in the Refinement Panel of Search Results page for SharePoint Online).
In this blog series I’ll explain the creation process of refiner controls. This creation process has improved in comparison with SharePoint 2010. Refiner controls in SharePoint 2013 make use of Display Templates, no more XML editing. This means that you can create your own refiner controls with just some HTML and JavaScript mark-up, but some knowledge and default mark-up is required to create these templates.
I’ll try to describe my creation process in this series. I split the creation process in different topics:
- Part 1: Create your first search refiner control template
- Part 2: Adding Refinement Actions to the Custom Search Refiner Control
- Part 3: Working with File Types in the Search Refiner Control Template
- Part 4: Create a dropdown refiner control
- Part 5: The Search Refiner Control Methods Explained
- Part 6: Create a Multi-Value Search Refiner Control
- Part 7: Working with Ranges in the Search Refiner Control