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
<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>
Apply Documentary Genre
</Button>
);
}}
/>
Step 15: Adding ReactiveComponent to make filters react
react={{
and: [
"myReactiveComponent",
...getReactDependenciesFromPreferences(
preferences,
filter
)
]
}}
Step 18: Adding ReactiveComponent to make Results react
<ResultsLayoutByCategory
preferences={this.preferences}
toggleFilters={toggleFilters}
componentProps={{
...newProps,
react: {
and: ["myReactiveComponent", "Language_Filter_0", "search"]
}
}}
/>
Final Preview 🎊
Code Snippets
Step 9: Adding Reactive Component
<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>
Apply 'Washington, DC' Location
</Button>
);
}}
/>
Step 15: Adding ReactiveComponent to make filters react
react={{
and: [
"myReactiveComponent",
...getReactDependenciesFromPreferences(
preferences,
filter
)
]
}}
Step 18: Adding ReactiveComponent to make Results react
<ResultsLayoutByCategory
preferences={this.preferences}
toggleFilters={toggleFilters}
componentProps={{
...newProps,
react: {
and: ["myReactiveComponent", "Categories_0", "search"]
}
}}
/>