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

**URL:** https://discuss.elastic.co/t/pass-additional-filters-with-search-text-from-search-ui-to-app-search/199647
**Category:** Elastic Search
**Tags:** elastic-app-search
**Created:** [September 16, 2019, 11:26am UTC](https://discuss.elastic.co/t/pass-additional-filters-with-search-text-from-search-ui-to-app-search/199647 "2019-09-16T11:26:17Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![ranjeet.tiwari](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ranjeet.tiwari/32/55160_2.png) [@ranjeet.tiwari](https://discuss.elastic.co/u/ranjeet.tiwari)
#### Post date: [September 16, 2019, 11:26am UTC](https://discuss.elastic.co/t/pass-additional-filters-with-search-text-from-search-ui-to-app-search/199647/1 "2019-09-16T11:26:17Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)
#### Post date: [September 16, 2019, 11:46am UTC](https://discuss.elastic.co/t/pass-additional-filters-with-search-text-from-search-ui-to-app-search/199647/2 "2019-09-16T11:46:11Z")

</div>

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](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](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](https://github.com/elastic/search-ui/blob/master/ADVANCED.md#advanced-configuration). For example, we could apply a "world\_heritage\_site" filter to every query like follows:

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

```

---

<div class="post-metadata">

### Author: ![ranjeet.tiwari](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ranjeet.tiwari/32/55160_2.png) [@ranjeet.tiwari](https://discuss.elastic.co/u/ranjeet.tiwari)
#### Post date: [September 16, 2019, 12:11pm UTC](https://discuss.elastic.co/t/pass-additional-filters-with-search-text-from-search-ui-to-app-search/199647/3 "2019-09-16T12:11:01Z")

</div>

Thanks @JasonStoltz

---

<div class="post-metadata">

### Author: ![ranjeet.tiwari](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ranjeet.tiwari/32/55160_2.png) [@ranjeet.tiwari](https://discuss.elastic.co/u/ranjeet.tiwari)
#### Post date: [September 17, 2019, 11:56am UTC](https://discuss.elastic.co/t/pass-additional-filters-with-search-text-from-search-ui-to-app-search/199647/4 "2019-09-17T11:56:50Z")

</div>

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) ?

---

<div class="post-metadata">

### Author: ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)
#### Post date: [September 17, 2019, 4:28pm UTC](https://discuss.elastic.co/t/pass-additional-filters-with-search-text-from-search-ui-to-app-search/199647/5 "2019-09-17T16:28:43Z")

</div>

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](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](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.

---

<div class="post-metadata">

### Author: ![ranjeet.tiwari](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ranjeet.tiwari/32/55160_2.png) [@ranjeet.tiwari](https://discuss.elastic.co/u/ranjeet.tiwari)
#### Post date: [September 18, 2019, 5:55am UTC](https://discuss.elastic.co/t/pass-additional-filters-with-search-text-from-search-ui-to-app-search/199647/6 "2019-09-18T05:55:18Z")

</div>

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](https://us1.discourse-cdn.com/elastic/original/3X/f/2/f2ae18024f4ed348575892d35ba6594b1de5f9fb.png) .

I have attached the screenshot of filter panel.

---

<div class="post-metadata">

### Author: ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)
#### Post date: [September 18, 2019, 12:52pm UTC](https://discuss.elastic.co/t/pass-additional-filters-with-search-text-from-search-ui-to-app-search/199647/7 "2019-09-18T12:52:01Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)
#### Post date: [September 18, 2019, 1:00pm UTC](https://discuss.elastic.co/t/pass-additional-filters-with-search-text-from-search-ui-to-app-search/199647/8 "2019-09-18T13:00:36Z")

</div>

"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](https://github.com/elastic/search-ui/issues/65). I plan to patch this in the next day or two.

---

<div class="post-metadata">

### Author: ![ranjeet.tiwari](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ranjeet.tiwari/32/55160_2.png) [@ranjeet.tiwari](https://discuss.elastic.co/u/ranjeet.tiwari)
#### Post date: [September 18, 2019, 1:10pm UTC](https://discuss.elastic.co/t/pass-additional-filters-with-search-text-from-search-ui-to-app-search/199647/9 "2019-09-18T13:10:28Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)
#### Post date: [September 18, 2019, 2:35pm UTC](https://discuss.elastic.co/t/pass-additional-filters-with-search-text-from-search-ui-to-app-search/199647/10 "2019-09-18T14:35:04Z")

</div>

@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](https://github.com/elastic/search-ui/blob/master/ADVANCED.md#working-with-the-headless-core).

For example:

```auto
<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](https://github.com/elastic/search-ui/blob/master/ADVANCED.md#overriding-connector-handlers)

```auto
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.

---

<div class="post-metadata">

### Author: ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)
#### Post date: [September 19, 2019, 11:56am UTC](https://discuss.elastic.co/t/pass-additional-filters-with-search-text-from-search-ui-to-app-search/199647/11 "2019-09-19T11:56:13Z")

</div>

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

---

<div class="post-metadata">

### Author: ![ranjeet.tiwari](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ranjeet.tiwari/32/55160_2.png) [@ranjeet.tiwari](https://discuss.elastic.co/u/ranjeet.tiwari)
#### Post date: [September 26, 2019, 6:38am UTC](https://discuss.elastic.co/t/pass-additional-filters-with-search-text-from-search-ui-to-app-search/199647/12 "2019-09-26T06:38:05Z")

</div>

Thanks @JasonStoltz

---

<div class="post-metadata">

### Author: ![ranjeet.tiwari](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ranjeet.tiwari/32/55160_2.png) [@ranjeet.tiwari](https://discuss.elastic.co/u/ranjeet.tiwari)
#### Post date: [September 26, 2019, 6:39am UTC](https://discuss.elastic.co/t/pass-additional-filters-with-search-text-from-search-ui-to-app-search/199647/13 "2019-09-26T06:39:32Z")

</div>

@JasonStoltz Please help me here [Is there any way to implement document level security in app search?](https://discuss.elastic.co/t/is-there-any-way-to-implement-document-level-security-in-app-search/201154)

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)
#### Post date: [October 24, 2019, 6:40am UTC](https://discuss.elastic.co/t/pass-additional-filters-with-search-text-from-search-ui-to-app-search/199647/14 "2019-10-24T06:40:02Z")

</div>

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