# Coveo HierarchicalFacet Component (CoveoHierarchicalFacet)

deprecated

  This component is exposed for legacy reasons. Instead, use the CategoryFacet component, which is more performant and easier to use.

  The `HierarchicalFacet` component inherits all of its options and behaviors from the `Facet` component, but is meant to be used to render hierarchical values.

  Note:

  > The `HierarchicalFacet` component does not support the `customSort` `Facet` option.

  The `HierarchicalFacet` component can be used to display files in a file system, or categories for items in a hierarchy.

  This facet requires a group by field with a special format to work correctly.

  Example:

  You have the following files indexed on a file system:

      c:\
        folder1\
          text1.txt
        folder2\
          folder3\
            text2.txt

  The `text1.txt` item would have a field with the following format: `c; c|folder1;`

  The `text2.txt` item would have a field with the following format: `c; c|folder2; c|folder2|folder3;`

  By default, the `|` character determines the hierarchy (`folder3` inside `folder2` inside `c`).

  Since both items contain the `c` value, selecting it value in the facet would return both items.

  Selecting the `folder3` value in the facet would only return the `text2.txt` item.

Not supported in

  Coveo for Salesforce Free

Deprecated since

  January 2019 Release (v2.5395.12)

## Index

### Methods

- close
- collapse
- debugInfo
- deselectMultipleValues
- deselectValue
- disable
- enable
- excludeMultipleValues
- excludeValue
- expand
- getBindings
- getCaptionForStringValue
- getDisplayedFacetValues
- getDisplayedValues
- getEndpoint
- getExcludedValues
- getSelectedValues
- getValueCaption
- hasSelectedValue
- hideWaitingAnimation
- open
- reset
- selectMultipleValues
- selectValue
- showLess
- showMore
- showWaitingAnimation
- switchToAnd
- switchToOr
- toggleExcludeValue
- toggleSelectValue
- unexcludeMultipleValues
- unexcludeValue
- updateSort
- get

### Properties

- bind
- componentOptionsModel
- componentStateModel
- disabled
- facetSearch
- facetSettings
- logger
- queryController
- queryStateModel
- root
- searchInterface
- ID

### Accessors

- usageAnalytics

### Component Options

- delimitingCharacter
- levelEnd
- levelStart
- marginByLevel

### Constructors

- constructor

## Methods

### close

- close(value: FacetValue | IValueHierarchy | string): void

- - Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :432

  Closes (collapses) a single value and hides all its children.

  #### Parameters

  - ##### value: FacetValue | IValueHierarchy | string

    The value to close.

  #### Returns void

### collapse

- collapse(): void

- Inherited from Facet.collapse

  - Defined in ui/Facet/Facet.ts :1253

  Collapses the facet.

  #### Returns void

### debugInfo

- debugInfo(): any

- Inherited from BaseComponent.debugInfo

  - Defined in ui/Base/BaseComponent.ts :41

  Return the debug info about this component.

  #### Returns any

### deselectMultipleValues

- deselectMultipleValues(values: FacetValue[] | string[], deselectChildren?: boolean): void

- Overwrites Facet.deselectMultipleValues

  - Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :312

  Deselects multiple values.

  #### Parameters

  - ##### values: FacetValue[] | string[]

    The array of values to deselect.

  - ##### Default value deselectChildren: boolean = !this.options.useAnd

    Specifies whether to also deselect all child values (if any). Default value is the opposite of the `useAnd` option value set for this `HierarchicalFacet`.

  #### Returns void

### deselectValue

- deselectValue(value: FacetValue | string, deselectChildren?: boolean): void

- Overwrites Facet.deselectValue

  - Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :247

  Deselects a single value

  #### Parameters

  - ##### value: FacetValue | string

    The value to deselect.

  - ##### Default value deselectChildren: boolean = true

    Specifies whether to also deselect all child values (if any). Default value is `true`.

  #### Returns void

### disable

- disable(): void

- Inherited from BaseComponent.disable

  - Defined in ui/Base/BaseComponent.ts :52

  Disable the component. Normally this means that the component will not execute handlers for the framework events (query events, for example). Components are enabled by default on creation.

  #### Returns void

### enable

- enable(): void

- Inherited from BaseComponent.enable

  - Defined in ui/Base/BaseComponent.ts :61

  Enable the component. Normally this means that the component will execute handlers for the framework events (query events, for example). Components are enabled by default on creation.

  #### Returns void

### excludeMultipleValues

- excludeMultipleValues(values: FacetValue[] | string[]): void

- Inherited from Facet.excludeMultipleValues

  - Defined in ui/Facet/Facet.ts :937

  Excludes multiple values.

  Does not trigger a query automatically.

  #### Parameters

  - ##### values: FacetValue[] | string[]

    Can be an array of `FacetValue` or an array of strings.

  #### Returns void

### excludeValue

- excludeValue(value: FacetValue | string, excludeChildren?: boolean): void

- Overwrites Facet.excludeValue

  - Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :275

  Excludes a single value.

  #### Parameters

  - ##### value: FacetValue | string

    The value to exclude.

  - ##### Default value excludeChildren: boolean = !this.options.useAnd

    Specifies whether to also exclude all child values (if any). Default value is the opposite of the `useAnd` option value set for this `HierarchicalFacet`.

  #### Returns void

### expand

- expand(): void

- Inherited from Facet.expand

  - Defined in ui/Facet/Facet.ts :1263

  Expands the facet.

  #### Returns void

### getBindings

- getBindings(): IComponentBindings

- Inherited from Component.getBindings

  - Defined in ui/Base/Component.ts :328

  Return the bindings, or environment, for the current component.

  #### Returns IComponentBindings

### getCaptionForStringValue

- getCaptionForStringValue(value: string): string

- Inherited from Facet.getCaptionForStringValue

  - Defined in ui/Facet/Facet.ts :1211

  Returns the configured caption for a desired facet value.

  #### Parameters

  - ##### value: string

    The string facet value whose caption the method should return.

  #### Returns string

### getDisplayedFacetValues

- getDisplayedFacetValues(): FacetValue[]

- Inherited from Facet.getDisplayedFacetValues

  - Defined in ui/Facet/Facet.ts :1019

  Returns the currently displayed values as an array of `FacetValue`.

  #### Returns FacetValue[]

  The currently displayed values.

### getDisplayedValues

- getDisplayedValues(): string[]

- Overwrites Facet.getDisplayedValues

  - Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :381

  Gets the values that the `HierarchicalFacet` is currently displaying.

  #### Returns string[]

  An array containing all the values that the `HierarchicalFacet` is currently displaying.

### getEndpoint

- getEndpoint(): ISearchEndpoint

- Inherited from Facet.getEndpoint

  - Defined in ui/Facet/Facet.ts :1093

  Returns the endpoint for the facet.

  #### Returns ISearchEndpoint

  The endpoint for the facet.

### getExcludedValues

- getExcludedValues(): string[]

- Inherited from Facet.getExcludedValues

  - Defined in ui/Facet/Facet.ts :1049

  Returns the currently excluded values as an array of strings.

  #### Returns string[]

  The currently excluded values.

### getSelectedValues

- getSelectedValues(): string[]

- Inherited from Facet.getSelectedValues

  - Defined in ui/Facet/Facet.ts :1031

  Returns the currently selected values as an array of strings.

  #### Returns string[]

  The currently selected values.

### getValueCaption

- getValueCaption(facetValue: IIndexFieldValue | FacetValue): string

- Overwrites Facet.getValueCaption

  - Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :363

  Gets the caption of a single value.

  #### Parameters

  - ##### facetValue: IIndexFieldValue | FacetValue

    The value whose caption the method should return.

  #### Returns string

  The caption of the value.

### hasSelectedValue

- hasSelectedValue(value: string): boolean

- Inherited from Facet.hasSelectedValue

  - Defined in ui/Facet/Facet.ts :1040

  Determines whether the specified value is selected in the facet.

  #### Parameters

  - ##### value: string

    The name of the facet value to verify.

  #### Returns boolean

### hideWaitingAnimation

- hideWaitingAnimation(): void

- Inherited from Facet.hideWaitingAnimation

  - Defined in ui/Facet/Facet.ts :1146

  Hides the waiting animation in the facet header.

  #### Returns void

### open

- open(value: FacetValue | IValueHierarchy | string): void

- - Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :409

  Opens (expands) a single value and shows all its children.

  #### Parameters

  - ##### value: FacetValue | IValueHierarchy | string

    The value to open.

  #### Returns void

### reset

- reset(): void

- Overwrites Facet.reset

  - Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :454

  Resets the `HierarchicalFacet` state.

  #### Returns void

### selectMultipleValues

- selectMultipleValues(values: FacetValue[] | string[], selectChildren?: boolean): void

- Overwrites Facet.selectMultipleValues

  - Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :227

  Selects multiple values

  #### Parameters

  - ##### values: FacetValue[] | string[]

    The array of values to select.

  - ##### Default value selectChildren: boolean = !this.options.useAnd

    Specifies whether to also select all child values (if any). Default value is the opposite of the `useAnd` option value set for this `HierarchicalFacet`.

  #### Returns void

### selectValue

- selectValue(value: FacetValue | string, selectChildren?: boolean): void

- Overwrites Facet.selectValue

  - Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :210

  Selects a single value.

  #### Parameters

  - ##### value: FacetValue | string

    The value to select.

  - ##### Default value selectChildren: boolean = !this.options.useAnd

    Specifies whether to also select all child values (if any). Default value is the opposite of the `useAnd` option value set for this `HierarchicalFacet`.

  #### Returns void

### showLess

- showLess(): void

- Inherited from Facet.showLess

  - Defined in ui/Facet/Facet.ts :1240

  Shows less elements in the Facet (up to the original number of values).

  See the `enableMoreLess`, and `numberOfValues` options.

  #### Returns void

### showMore

- showMore(): void

- Inherited from Facet.showMore

  - Defined in ui/Facet/Facet.ts :1224

  Shows the next page of results in the facet.

  See the `enableMoreLess`, and `pageSize` options.

  Triggers a query if needed, or displays the already available values.

  #### Returns void

### showWaitingAnimation

- showWaitingAnimation(): void

- Inherited from Facet.showWaitingAnimation

  - Defined in ui/Facet/Facet.ts :1135

  Shows a waiting animation in the facet header (a spinner).

  #### Returns void

### switchToAnd

- switchToAnd(): void

- Inherited from Facet.switchToAnd

  - Defined in ui/Facet/Facet.ts :1071

  Switches the facet to `AND` mode.

  See the `useAnd`, and `enableTogglingOperator` options.

  #### Returns void

### switchToOr

- switchToOr(): void

- Inherited from Facet.switchToOr

  - Defined in ui/Facet/Facet.ts :1083

  Switches the facet to `OR` mode.

  See the `useAnd`, and `enableTogglingOperator` options.

  #### Returns void

### toggleExcludeValue

- toggleExcludeValue(value: FacetValue | string): void

- Overwrites Facet.toggleExcludeValue

  - Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :348

  Toggles the exclusion of a single value (excludes value if not excluded; un-excludes value if excluded).

  #### Parameters

  - ##### value: FacetValue | string

    The value to exclude or un-exclude.

  #### Returns void

### toggleSelectValue

- toggleSelectValue(value: FacetValue | string): void

- Overwrites Facet.toggleSelectValue

  - Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :334

  Toggles the selection of a single value (selects value if not selected; deselects value if selected).

  #### Parameters

  - ##### value: FacetValue | string

    The value to select or deselect.

  #### Returns void

### unexcludeMultipleValues

- unexcludeMultipleValues(values: FacetValue[] | string[]): void

- Inherited from Facet.unexcludeMultipleValues

  - Defined in ui/Facet/Facet.ts :967

  Unexcludes multiple values.

  Does not trigger a query automatically.

  #### Parameters

  - ##### values: FacetValue[] | string[]

    Can be an array of `FacetValue` or an array of strings.

  #### Returns void

### unexcludeValue

- unexcludeValue(value: FacetValue | string, unexludeChildren?: boolean): void

- Overwrites Facet.unexcludeValue

  - Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :295

  Un-excludes a single value.

  #### Parameters

  - ##### value: FacetValue | string

    The value to un-exclude.

  - ##### Default value unexludeChildren: boolean = !this.options.useAnd

    Specifies whether to also un-exclude all child values (if any). Default value is the opposite of the `useAnd` option value set for this `HierarchicalFacet`.

  #### Returns void

### updateSort

- updateSort(criteria: string): void

- Overwrites Facet.updateSort

  - Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :401

  Updates the sort criteria for the `HierarchicalFacet`.

  See the `sortCriteria` property of the [`IGroupByRequest`] interface for the list and description of possible values.

  #### Parameters

  - ##### criteria: string

    The new sort criteria.

  #### Returns void

### Static get

- get(element: HTMLElement, componentClass?: any, noThrow?: boolean): BaseComponent

- Inherited from Component.get

  - Defined in ui/Base/Component.ts :410

  Get the bound component to the given HTMLElement. Throws an assert if the HTMLElement has no component bound, unless using the noThrow argument.
  If there is multiple component bound to the current HTMLElement, you must specify the component class.

  #### Parameters

  - ##### element: HTMLElement

    HTMLElement for which to get the bound component.

  - ##### Optional componentClass: any

    Optional component class. If the HTMLElement has multiple components bound, you must specify which one you are targeting.

  - ##### Optional noThrow: boolean

    Boolean option to tell the method to not throw on error.

  #### Returns BaseComponent

## Properties

### bind

bind: ComponentEvents

Inherited from Component.bind

- Defined in ui/Base/Component.ts :270

Allows the component to bind events and execute them only when it is enabled.

type

  {Coveo.ComponentEvents}

### componentOptionsModel

componentOptionsModel: ComponentOptionsModel

Inherited from Component.componentOptionsModel

- Defined in ui/Base/Component.ts :294

Contains the state of options for different components. Mainly used by ResultLink.

### componentStateModel

componentStateModel: ComponentStateModel

Inherited from Component.componentStateModel

- Defined in ui/Base/Component.ts :282

Contains the state of different components (enabled vs disabled). Allows to get/set values. Triggers component state event when modified. Each component can listen to those events.

### disabled

disabled: boolean

Inherited from BaseComponent.disabled

- Defined in ui/Base/BaseComponent.ts :23

A disabled component will not participate in the query, or listen to ComponentEvents.

type

  {boolean}

### facetSearch

facetSearch: FacetSearch

Inherited from Facet.facetSearch

- Defined in ui/Facet/Facet.ts :731

Renders and handles the facet Search part of the component.

### facetSettings

facetSettings: FacetSettings

Inherited from Facet.facetSettings

- Defined in ui/Facet/Facet.ts :736

Renders and handles the facet Settings part of the component

### logger

logger: Logger

Inherited from BaseComponent.logger

- Defined in ui/Base/BaseComponent.ts :18

Allows component to log in the dev console.

### queryController

queryController: QueryController

Inherited from Component.queryController

- Defined in ui/Base/Component.ts :286

Contains the singleton that allows to trigger queries.

### queryStateModel

queryStateModel: QueryStateModel

Inherited from Component.queryStateModel

- Defined in ui/Base/Component.ts :278

Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events.

### root

root: HTMLElement

Inherited from Component.root

- Defined in ui/Base/Component.ts :274

A reference to the root HTMLElement (the SearchInterface).

### searchInterface

searchInterface: SearchInterface

Inherited from Component.searchInterface

- Defined in ui/Base/Component.ts :290

A reference to the root of every component, the SearchInterface.

### Static ID

ID: string

Inherited from BaseComponent.ID

- Defined in ui/Base/BaseComponent.ts :28

The static ID that each component needs in order to be identified.
For example, SearchButton -> static ID: SearchButton -> className: CoveoSearchButton

## Accessors

### usageAnalytics

- get (): IAnalyticsClient

- Inherited from Component.usageAnalytics

  - Defined in ui/Base/Component.ts :343

  A reference to the Analytics.client.

  #### Returns IAnalyticsClient

## Component Options

### delimitingCharacter

delimitingCharacter: string

- Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :131

The character that allows to specify the hierarchical dependency.

Example:

If your field has the following values:

`@field: c; c>folder2; c>folder2>folder3;`

The delimiting character is `>`.

Default value is `|`.

Default

  `|`

Markup configuration example(s) :

    data-delimiting-character='foo'

### levelEnd

levelEnd: number

- Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :161

Specifies at which level (0-based index) of the hierarchy the `HierarchicalFacet` should stop displaying its values.

Default value is `undefined`, which means the `HierarchicalFacet` component renders all hierarchical levels. Minimum value is `0`.

Minimum

  `0`

Markup configuration example(s) :

    data-level-end='10'

### levelStart

levelStart: number

- Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :152

Specifies at which level (0-based index) of the hierarchy the `HierarchicalFacet` should start displaying its values.

Example:

If you have the following files indexed on a file system:

    c:\
       folder1\
           text1.txt
       folder2\
         folder3\
           text2.txt

Setting `levelStart` to `1` displays `folder1` and `folder2` in the `HierarchicalFacet`, but omits `c:`.

Default (and minimum) value is `0`.

Minimum

  `0`

Default

  `0`

Markup configuration example(s) :

    data-level-start='10'

### marginByLevel

marginByLevel: number

- Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :168

Specifies the margin (in pixels) to display between each hierarchical level when expanding.

Default value is `10`.

Minimum

  `0`

Default

  `10`

Markup configuration example(s) :

    data-margin-by-level='10'

## Constructors

### constructor

- new HierarchicalFacet(element: HTMLElement, options: IHierarchicalFacetOptions, bindings: IComponentBindings): HierarchicalFacet

- Overwrites Facet.constructor

  - Defined in ui/HierarchicalFacet/HierarchicalFacet.ts :185

  Creates a new `HierarchicalFacet` component.

  #### Parameters

  - ##### element: HTMLElement

    The HTMLElement on which to instantiate the component.

  - ##### options: IHierarchicalFacetOptions

    The options for the `HierarchicalFacet` component.

  - ##### bindings: IComponentBindings

    The bindings that the component requires to function normally. If not set, these will be automatically resolved (with a slower execution time).

  #### Returns HierarchicalFacet

### Implements

- IFieldValueCompatibleFacet
- IComponentBindings