Pass additional filters with search text from Search UI to App search

Elastic Search
1

Is there any way to pass additional filters with search text from search UI to app search?

We have advance filter screen, there user can select the several filters and hit the submit button for search result.

2

Hi @ranjeet.tiwari. If you take a look at the Sandbox example, you can see how filters are applied via Facet components: https://github.com/elastic/search-ui/blob/master/examples/sandbox/src/App.js.

The live demo can be found here: https://codesandbox.io/s/national-parks-example-kdyms?fontsize=14

If you would like to apply a static filter to every query, that is non-editable by a user, you could use Advanced Configuration. For example, we could apply a "world_heritage_site" filter to every query like follows:

{
  searchQuery: {
    filters: [
      {
        field: "world_heritage_site",
        values: ["true"]
      }
    ]
  }
}
3

Thanks @JasonStoltz

4

Hi @JasonStoltz, Once I select all filters and hit submit button from advance panel. result should be refreshed .. is there any way to refresh the result explicitly with updated config (added new filters in config) ?

5

Hey @ranjeet.tiwari. I'm confused about what you are trying to do.

Are you using facets and a "Facet" component?

If not, are you trying to build your own component that applies a filter without facets?

If so, I don't think you want to use config, you'll want to use "actions".

The general concept is documented here: https://github.com/elastic/search-ui/blob/master/ADVANCED.md#working-with-the-headless-core.

A list of actions that you have available to you are listed here: https://github.com/elastic/search-ui/blob/master/ADVANCED.md#actions.

It sounds like what you may want is the addFilter action. That will update the filters selected and trigger a new query.

6

I am not using facet and I have developed my own component called advance search where I have option to select multiple filters and there is submit button.

On the click of submit button, I want to show results...

On the click on submit button from filter panel, I am unable to generate/refresh the result

Filterpanel
Filterpanel.PNG1267×234 199 KB
.

I have attached the screenshot of filter panel.

7

Hey @ranjeet. I see. Then yes, on a user clicks that "Search" button, what you'll want to do is call the "addFilter" action to apply those filters. That will trigger a new query.

Make sense?

8

"addFilter" only accepts a single filter, to my knowledge, so you'll probably need to make a call to "addFilter" for each field. This currently will not work because of this issue: https://github.com/elastic/search-ui/issues/65. I plan to patch this in the next day or two.

9

Thanks for the update ….
Through below code, I am able to update config

searchQuery: {
filters: [
{
field: "world_heritage_site",
values: ["true"]
}
]

Is there any explicit way to call refresh result/perform search with new config?

I just want to trigger the function from my button in filter panel that is being trigger on search button associated with SearchBox component of search ui.

How do I use addfilter function? I went through documentation but unable to find the way to addfilter..in which object I will get this method?

10

@ranjeet

Using actions - You should probably do this

The way Search UI is designed to work, is by calling "actions" to apply filters or change the search term.

You can access "actions" in the following ways: https://github.com/elastic/search-ui/blob/master/ADVANCED.md#working-with-the-headless-core.

For example:

<WithSearch mapContextToProps={({ isLoading }) => ({ isLoading })}>
    {({ addFilter, setSearchTerm }) => (
      <input type="button" onClick={e => {
         setSearchTerm(e.target.value);
         setFilter("quarter", 2);
         setFilter("documentType", "PDF");
      }}>Search</input>
    )}
  </WithSearch>

This is how you should be using Search UI to do what you are trying to do.

As stated before, calling actions quickly after one another as shown is NOT working right now. I am planning to put in a fix today or tomorrow that would allow that example to work.

An alternative to using actions - overriding onSearch

This could also work for you, but it is less ideal. It takes the approach that you are mentioning, applying query configuration dynamically. This overrides the onSearch method

onSearch: (state, queryConfig, next) => {
    return next(
      {
        ...state,
        filters: [
          {
            field: "world_heritage_site",
            values: ["true"]
          },
          {
            field: "states",
            values: ["California"]
          }
        ]
      },
      queryConfig
    );
  },

When a user clicks on the "Search" button, you would then call the "setSearchTerm" action as seen above, which would trigger the "onSearch" method.

11

Follow this issue to track progress of the mentioned change: https://github.com/elastic/search-ui/issues/65

12

Thanks @JasonStoltz

13

@JasonStoltz Please help me here Is there any way to implement document level security in app search?

14

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.