A new result types feature in the react-search-refiner SPFx sample!

A new result types feature in the react-search-refiner SPFx sample!

In December of this year, a new feature has been released in the latest version of the react-search-refiners SPFx sample: the search result types. The goal of this feature is very similar to the classic SharePoint one: build conditional displays very easily according to one ore more conditions based on search results properties. The only difference is that we replaced good old display templates by Handlebars templates just like the existing template feature of this Web Part.

Remember this?
Result types modern adaptation (click on the image to see the animation)

For those who already used this Web Part, we could of course achieve the same goal just by creating a huge main Handlebars template with multiple conditions within the same file. However, this strategy was very painful to maintain when multiple conditions were defined and required some advanced skills to implement. Therefore, the purpose of this new feature is to reduce the overall complexity and allow end-users to customize the display easily.

How does it work

We use the @pnp PropertyFieldCollectionData control by defining the following fields:

  • Managed property name, corresponding to the search schema managed property name to evaluate (like ContentTypeId, FileType, etc.). To use a property, it has to be defined first in the “Selected Properties” parameter in the Web Part property pane.
  • Operator: logical operator to use. This list is by default and covers the main scenarios like “equals”, “greater than”, etc. This is more than the classic SharePoint feature.
  • Value: the value to compare evaluated as string.
  • Template content: custom code editor field to edit the Handlebars template content. The custom field capability is only available from the 1.13.0 @pnp/sp-dev-fx-property-controls version. With this option, the template content is saved directly in the WP property bag (inline mode) along its trigger condition.
  • External template URL: like the main template feature of the WP, you can define an external template file instead of using the WP property bag.

Then, Handlebars templates are built dynamically for each condition by using the corresponding handlebars helpers operators. By chance, all the listed operators almost follow the same structure “{{#operator cond1 cond2}}” (ex: {{#eq FileType ‘docx’}}). We use an if/else structure built recursively to choose over a specific result type content depending of the order set in the property pane control:

Finally, the aggregated conditions are registered as an Handlebars partial to be used in the main template:

By default the partial arbitrary name is ‘resultTypes‘ and is callable like this in the main template:

Render a default block if no condition matches

You may have noticed the latest block of the generated structure is always set to {{ > @partial-block}}. This special instruction tells Handlebars to render the default content defined for the partial, meaning the content defined between the {{> resultTypes}} and {{/resultTypes}} tags. This way, you can choose the content to display when no result type is matched:

What if I have more than one condition for a result type?

For complexity reason, the property pane control only supports one base condition for a result type (like “condition” + “operator” + “value”). However, and thanks to Handlebars helpers, you can add other conditions directly in the template itself. For instance the following configuration would match all PDF documents containing “SharePoint” in the title:

Don’t forget the {{> @partial-block }} instruction to display the default content when the second condition doesn’t match. If you don’t, nothing will be displayed.

Test it out!

You can test this new feature just by cloning the latest dev branch from the sp-dev-fx-webparts GitHub repository and check for the react-search-refiners sample. Also, stay tuned for an upcoming tutorial video about how to build an awesome search center using the modern SharePoint Online experience!







Add yours
  1. navkrishkannan

    Could you please let me know if this supports in SharePoint Online? We followed the your steps but looks like doesnt work in SharePoint Online.

+ Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.