Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
sharepoint/assets Cleanup Jul 8, 2019
.editorconfig Moved files Jan 8, 2019
.gitignore Ignore shrinkwrap.yaml Jan 8, 2019
.yo-rc.json Upgrade to 1.9.1 (#326) Oct 21, 2019 [ModernSearch] language fixes for typo's (#219) Jul 11, 2019
gulpfile.js Moved files Jan 8, 2019
package-lock.json Upgrade to 1.9.1 (#326) Oct 21, 2019
package.json Added main entry to package.json Oct 28, 2019
tslint.json Moved files Jan 8, 2019

SharePoint Framework renderer for react-search-refiners


This sample is an example on how to use custom code renderers in the react-search-refiners project. Custom code renderers lets you render the search results from a react-search-refiners webpart in your own way, with whatever tools you prefer. Typically, you will use SPFx Application Customizers to mount these renderers, but you may also use SPFx webparts. This sample contains a SPFx Application Customizer which uses React and Office-UI-Fabric-React to render the search results. This package contains two separate renderers: a basic renderer and a persona renderer for rendering searches after people.

Used SharePoint Framework Version


Applies to


Solution Author(s)
react-search-refiners-renderers Tarald Gåsbakk - @taraldga

Version history

Version Date Comments
1.0.0 Jan 06, 2019 Initial release
1.0.0 Mar 05, 2019 Added Persona renderer
1.0.1 Mar 16, 2019 Fixed hardcoded profile image url in Persona renderer. Updated some files to be in sync with Search solution

Minimal Path to Awesome

  • Follow the Minimal Path to Awesome for React Search Refiners.
  • In this repository, run from the command line:
    • npm install
    • gulp serve

Creating your own renderers

The renderer bundled in this sample is a simple renderer designed to show how a simple implementation of a code renderer would look like. Following is a quick tour of the setup-process and the different settings you will encounter when creating your own renderer.

Registering a new renderer

The renderers work by announcing themselves to any react-search-refiners webparts that exists on the pages they are installed on. The registration process is handled by the 'registerRenderer'- function in the 'ResultService' - class in './src/services'. A typical registration will take place onInit.

The parameters of the registerRenderer function:

  • rendererId: The id of the current renderer. Used to identify which renderer the user has selected. Typically 'this.componentId'.
  • rendererName: The displayName of the renderer in the react-search-refiners webpart property panel.
  • rendererIcon: The office-ui-fabric-react icon that should be displayed in the property pane of the webpart.
  • callback: The callback function that is used to render the webpart. This will be called when the renderer is selected and new data is available.
  • customFields: Optional names of custom fields that may be used for templating in the renderer.


By registering a field-name in the 'customFields' value, you may expose them to the user, letting them choose which fields should be displayed in different places in your renderer. In the bundled example, a subheader is passed along as a template field. The dropdown selection that the user can chose elements from are the elements selected for fetching by the search webpart.

Using the Persona renderer

In order to make the persona-renderer work as is when installing the ready-made package, you need to fetch the following properties: PreferredName,WorkEmail,WorkPhone,JobTitle,OfficeNumber,Title,PictureURL,FirstName,LastName,userName,Path

You can’t perform that action at this time.