Overview

The How-to guide enumerates steps to programatically add an arbitrary facet filter to an existing Search UI.

Pre-requisite: Create a Search UI

You can follow this 👇🏻 step-by-step tutorial to build a new Search UI, incase you already don't have one.



Now that we have a Search UI, Let's begin adding a route!! 🏎

Note: The tutorial uses a Search UI built on top of faceted-search template, consider using the same template to match exact steps.

We shall be doing it for two Search UIs, one uses ES and the other uses Fusion as backend.

With ES as backend

Code Snippets

Step 9: Adding Reactive Component
Copy 
<ReactiveComponent
  componentId="myReactiveComponent"
  dataField="genres_data.keyword"
  render={({ setQuery, value }) => {
    return (
      <Button
        onClick={() => {
          const query = {
            query: {
              term: { "genres_data.keyword": "Documentary" }
            }
          };

          setQuery({
            query,
            value: "Documentary"
          });
        }}
        style={{ position: "relative", left: "50%", top: "9px" }}
        type="primary"
      >
        <span role="img" aria-label="emoji">
          {" "}
          🎦
        </span>
        &nbsp; Apply Documentary Genre
      </Button>
    );
  }}
/>
Step 15: Adding ReactiveComponent to make filters react
Copy 
react={{
  and: [
    "myReactiveComponent",
    ...getReactDependenciesFromPreferences(
      preferences,
      filter
    )
  ]
}}
Step 18: Adding ReactiveComponent to make Results react
Copy 
<ResultsLayoutByCategory
  preferences={this.preferences}
  toggleFilters={toggleFilters}
  componentProps={{
    ...newProps,
    react: {
      and: ["myReactiveComponent", "Language_Filter_0", "search"]
    }
  }}
/>

Final Preview 🎊

Code Snippets

Step 9: Adding Reactive Component
Copy 
<ReactiveComponent
  componentId="myReactiveComponent"
  render={({ setQuery, value }) => {
    return (
      <Button
        onClick={() => {
          // handles color change
          const query = {
            query: encodeURIComponent('fq=location_s:"Washington, DC"')
          };

          setQuery({
            query,
            value: encodeURIComponent('fq=location_s:"Washington, DC"')
          });
        }}
        style={{ position: "relative", left: "50%", top: "9px" }}
        type="primary"
      >
        <span role="img" aria-label="emoji">
          📍
        </span>
        &nbsp; Apply 'Washington, DC' Location
      </Button>
    );
  }}
/>
Step 15: Adding ReactiveComponent to make filters react
Copy 
react={{
  and: [
    "myReactiveComponent",
    ...getReactDependenciesFromPreferences(
      preferences,
      filter
    )
  ]
}}
Step 18: Adding ReactiveComponent to make Results react
Copy 
<ResultsLayoutByCategory
  preferences={this.preferences}
  toggleFilters={toggleFilters}
  componentProps={{
    ...newProps,
    react: {
      and: ["myReactiveComponent", "Categories_0", "search"]
    }
  }}
/>

Final Preview 🎊