# Hierarchical Facets With App Search & Search-UI

**URL:** https://discuss.elastic.co/t/hierarchical-facets-with-app-search-search-ui/285766
**Category:** Elastic Search
**Tags:** elastic-app-search
**Created:** [October 3, 2021, 2:23pm UTC](https://discuss.elastic.co/t/hierarchical-facets-with-app-search-search-ui/285766 "2021-10-03T14:23:04Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![en\_73](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/en_73/32/84542_2.png) [@en\_73](https://discuss.elastic.co/u/en_73)
#### Post date: [October 3, 2021, 2:23pm UTC](https://discuss.elastic.co/t/hierarchical-facets-with-app-search-search-ui/285766/1 "2021-10-03T14:23:04Z")

</div>

I am trying to implement hierarchical facets using search UI which is connecting to my app search instance.  
At the moment I have a config file which lists my facets in like so -  
`"facets": [`  
` "type",`  
` "sectors",`  
` "locations",`  
` "generations",`  
` "genders",`  
` "behaviours",`  
` "authors"`  
` ],`  
They are then 'built' using this function -  
`export function buildFacetConfigFromConfig() {`  
` const config = getConfig();` ` const facets = (config.facets || []).reduce((` `acc` `, ` `n` `) => {`  
` ` `acc` `=` `acc` ` || {};`  
` ` `acc` `[` `n` `] = {`  
` type: "value",`  
` size: 100`  
` };`  
` return` `acc` `;`  
` }, undefined);` ` return facets;`  
`}`  
Then in my App.js I have -  
`const config = {`  
` searchQuery: {`  
` facets: buildFacetConfigFromConfig(),`  
` ...buildSearchOptionsFromConfig()`  
` },`  
` autocompleteQuery: buildAutocompleteQueryConfig(),`  
` apiConnector: connector,`  
` alwaysSearchOnInitialLoad: true`  
`};`

This works for my facets that are just 'one level' however when viewing the facets locally, some of them are showing up as in the screenshot attached -

 ![Screenshot 2021-10-01 at 14.29.20](https://us1.discourse-cdn.com/elastic/original/3X/2/8/288d87ac9cebaa45aeff745082fc11f000a13170.png)

As you can see, under locations there options and sub-options (e.g When clicking on Central & East Asia you will see the Japan facet show up).

I'm finding it very tricky to implement this and struggling to come across any clear documentation. I would like to know how to implement these hierarchical facets based on my current implementation or (if I am at the wrong starting point) then what I need to do instead to implement this.

---

<div class="post-metadata">

### Author: ![ylasri](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ylasri/32/86120_2.png) [@ylasri](https://discuss.elastic.co/u/ylasri)
#### Post date: [October 3, 2021, 7:29pm UTC](https://discuss.elastic.co/t/hierarchical-facets-with-app-search-search-ui/285766/2 "2021-10-03T19:29:15Z")

</div>

Hope this link will help you, it contains an example for your use case

> <https://github.com/elastic/search-ui/issues/285>
>
> Example in App Search Documentation:
> https://swiftype.com/documentation/app-sea…rch/guides/hierarchical-facets
> 
> Live example using App Search:
> https://github.com/swiftype/swiftype-app-search-hierarchical-facets-example

---

<div class="post-metadata">

### Author: ![ylasri](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ylasri/32/86120_2.png) [@ylasri](https://discuss.elastic.co/u/ylasri)
#### Post date: [October 3, 2021, 7:30pm UTC](https://discuss.elastic.co/t/hierarchical-facets-with-app-search-search-ui/285766/3 "2021-10-03T19:30:19Z")

</div>

Example in App Search Documentation:

> **[Hierarchical Facets Guide | Swiftype Documentation](https://swiftype.com/documentation/app-search/guides/hierarchical-facets)**
>
> Learn how to get the most out of Swiftype

Live example using App Search:

> **[GitHub - swiftype/swiftype-app-search-hierarchical-facets-example: An example...](https://github.com/swiftype/swiftype-app-search-hierarchical-facets-example)**
>
> An example of how Hierarchical Facets can be implemented with App Search - GitHub - swiftype/swiftype-app-search-hierarchical-facets-example: An example of how Hierarchical Facets can be implemente...

---

<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 31, 2021, 7:30pm UTC](https://discuss.elastic.co/t/hierarchical-facets-with-app-search-search-ui/285766/4 "2021-10-31T19:30:45Z")

</div>

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