Can the Facet Name be configured

Elastic Search
1

Hi everyone,

we are using Elastic Enterprise search with Search UI.

As we all know, the key can only be lowercases and numbers with no whitespaces. This is OK when converting the name of our keys, but looks really bad in search UI.

Is there a way to config the title of a facet? Couldn't find anything in the docs.

2

Hey John,

Each facet component supports a label property.

                      <Facet
                        field="states"
                        label="States"
                        filterType="any"
                      />

You can see this in action here: search-ui-national-parks-example - CodeSandbox

Hope this helps.

Joe

1 Like
3

Thx Joseph. That probably means i have to write some config somewhere and built the layout myself?
I can't figure out how to put this in the engine.json.

4

Good point - so as you're coming from the downloaded search-ui which makes things slightly more difficult.

Your Search-UI project looks something very similar to this: GitHub - elastic/app-search-reference-ui-react: A generic UI for use with any App Search Engine.

What you could do is update each of the facet fields values into an object with a label and field property in this location app-search-reference-ui-react/engine.json.example at master · elastic/app-search-reference-ui-react · GitHub

facetFields: [{field: "exampleField", label: "Example Field"}]

then change the map iterator slightly app-search-reference-ui-react/App.js at master · elastic/app-search-reference-ui-react · GitHub

{getFacetFields().map(({field, label}) => (
     <Facet key={field} field={field} label={label} />
))}

In this line, we are iterating over the facet fields you have chosen and returning a Facet component. In the above example, we are using the label field in the facet field object.

Hope this helps.

5

Thx for the help.. I'll play with it. We have to create dynamic configs as we don't know in advance which Facets we are going to need :slight_smile: