Coveo DynamicHierarchicalFacet Component (CoveoDynamicHierarchicalFacet)

The DynamicHierarchicalFacet component is a facet that renders values in a hierarchical fashion. It determines the filter to apply depending on the selected path of values.

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

Not supported in

Coveo for Salesforce Free

Available since

January 2020 Release (v2.7968)

Additional documentation

Using Hierarchical Facets

Index

Methods

collapse

  • collapse(): void

debugInfo

  • debugInfo(): any

disable

  • disable(): void
  • 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
  • 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

enableFreezeFacetOrderFlag

  • enableFreezeFacetOrderFlag(): void
  • For this method to work, the component has to be the child of a DynamicFacetManager component.

    Sets a flag indicating whether the facets should be returned in their current order.

    Setting the flag to true helps ensuring that the facets do not move around while the end-user is interacting with them.

    The flag is automatically set back to false after a query is built.

    Returns void

expand

  • expand(): void

getBindings

getCaption

  • getCaption(value: string): string

reset

  • reset(): void

selectPath

  • selectPath(path: string[]): void

showLessValues

  • showLessValues(): void

showMoreValues

  • showMoreValues(additionalNumberOfValues?: number): void

toggleCollapse

  • toggleCollapse(): void

Static get

  • get(element: HTMLElement, componentClass?: any, noThrow?: boolean): BaseComponent
  • 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

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

type

{Coveo.ComponentEvents}

componentOptionsModel

componentOptionsModel: ComponentOptionsModel

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

componentStateModel

componentStateModel: ComponentStateModel

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

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

type

{boolean}

logger

logger: Logger

Allows component to log in the dev console.

queryController

queryController: QueryController

Contains the singleton that allows to trigger queries.

queryStateModel

queryStateModel: QueryStateModel

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

A reference to the root HTMLElement (the SearchInterface).

searchInterface

searchInterface: SearchInterface

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

Static ID

ID: string

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

Accessors

usageAnalytics

Component Options

basePath

basePath: string[]

The base path shared by all values to display in the hierarchical facet.

If you set this option, the specified base path will always be active on the facet.

This implies that:

  • The end user will not have to manually select the specified base path values.
  • Values that do not have the specified base path will not be displayed in the facet.
Default

[]

Available since

April 2020 Release (v2.8864)

Markup configuration example(s) :
data-base-path='electronics'
data-base-path='electronics,laptops'

clearLabel

clearLabel: string

The label to display to clear the facet when a value is selected.

Default value is the localized string for AllCategories.

Markup configuration example(s) :
data-clear-label='Everything'

collapsedByDefault

collapsedByDefault: boolean

Whether this facet should be collapsed by default.

Only effective when

enableCollapse is set to true

Default

false

Markup configuration example(s) :
data-collapsed-by-default='true'
data-collapsed-by-default='false'

delimitingCharacter

delimitingCharacter: string

The character that specifies the hierarchical dependency.

Example:

If your field has the following values:

electronics; electronics>laptops; electronics>laptops>gaming;

The delimiting character is >.

Default

|

Markup configuration example(s) :
data-delimiting-character='>'

dependsOn

dependsOn: string

The id option value of another facet in which at least one value must be selected in order for the dependent hierarchical facet to be visible.

Default: undefined and the hierarchical facet does not depend on any other facet to be displayed.

Additional documentation

Defining Dependent Facets

Markup configuration example(s) :
data-depends-on='department'

dependsOnCondition

dependsOnCondition: IDependentFacetCondition

A function that verifies whether the current state of the dependsOn facet allows the dependent facet to be displayed.

If specified, the function receives a reference to the resolved dependsOn facet component instance as an argument, and must return a boolean. The function's argument should typically be treated as read-only.

By default, the dependent facet is displayed whenever one or more values are selected in its dependsOn facet.

Only effective when

dependsOn is set to true

Additional documentation

Defining Dependent Facets

enableCollapse

enableCollapse: boolean

Whether to allow the end-user to expand and collapse this facet.

Default

true

Markup configuration example(s) :
data-enable-collapse='true'
data-enable-collapse='false'

enableFacetSearch

enableFacetSearch: boolean

Whether to allow the end-user to search the facet values.

Default

false

Markup configuration example(s) :
data-enable-facet-search='true'
data-enable-facet-search='false'

enableMoreLess

enableMoreLess: boolean

Whether to enable the More and Less buttons in the Facet.

See also the numberOfValues option.

Default

true

Markup configuration example(s) :
data-enable-more-less='true'
data-enable-more-less='false'

enableScrollToTop

enableScrollToTop: boolean

Whether to scroll back to the top of the page whenever the end-user interacts with a facet.

Default

true

Markup configuration example(s) :
data-enable-scroll-to-top='true'
data-enable-scroll-to-top='false'

field

The index field whose values the facet should use. The field values should have the form: the; the|path; the|path|to; the|path|to|given; the|path|to|given|item; where the delimiting character is |. This default delimiting character can be changed using the delimitingCharacter option.

To help you verify whether your fields are setup correctly, use the debugInfo method.

Required

Specifying a value for this option is required for the component to work

Additional documentation

Using the Hierarchical Facet Component.

Markup configuration example(s) :
data-field='@category'

filterFacetCount

filterFacetCount: boolean

Whether to exclude folded result parents when estimating result counts for facet values.

See also the Folding and FoldingForThread components.

Default: false if folded results are requested; true otherwise.

Markup configuration example(s) :
data-filter-facet-count='true'
data-filter-facet-count='false'

id

id: string

A unique identifier for the facet. Among other things, this identifier serves the purpose of saving the facet state in the URL hash.

If you have two facets with the same field on the same page, you should specify an id value for at least one of those two facets. This id must be unique among the facets.

Default value is the field option value.

Markup configuration example(s) :
data-id='productcategory'

includeInBreadcrumb

includeInBreadcrumb: boolean

Whether to notify the Breadcrumb component when toggling values in the facet.

Default

true

Markup configuration example(s) :
data-include-in-breadcrumb='true'
data-include-in-breadcrumb='false'

injectionDepth

injectionDepth: number

The number of items to scan for facet values.

Setting this option to a higher value may enhance the accuracy of facet value counts at the cost of slower query performance.

Minimum

0

Default

1000

Markup configuration example(s) :
data-injection-depth='500'

numberOfValues

numberOfValues: number

The maximum number of field values to display by default in the facet before the user clicks the arrow to show more.

See also the enableMoreLess option.

Minimum

0

Default

5

Markup configuration example(s) :
data-number-of-values='8'

sortCriteria

sortCriteria: "occurrences" | "alphanumeric"

The sort criterion to use for this facet.

Default (Search API): occurrences.

Available since

March 2020 Release (v2.8521)

Markup configuration example(s) :
data-sort-criteria='alphanumeric'

title

title: string

The title to display at the top of the facet.

Default value is the localized string for NoTitle.

Markup configuration example(s) :
data-title='Product category'

valueCaption

valueCaption: IStringMap<string>

A mapping of facet values to their desired captions.

Additional documentation

Normalizing Facet Value Captions

Constructors

constructor

Implements

  • IDynamicHierarchicalFacet