Collapses the facet, hiding values.
Return the debug info about this component.
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.
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.
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.
Expands the facet, displaying all of its currently fetched values.
Return the bindings, or environment, for the current component.
The string to find a caption for. Returns the caption for a value or the value itself if no caption is available.
Deselects the path in the facet.
Does not trigger a query automatically. Does not update the visual of the facet until a query is performed.
Select a path in the hierarchy.
Does not trigger a query automatically. Does not update the visual of the facet until a query is performed.
The values representing the path.
Reduces the number of displayed facet values down to numberOfValues.
See the enableMoreLess option.
Automatically triggers an isolated query.
Requests additional values.
See the enableMoreLess option.
Automatically triggers an isolated query.
The number of additional values to request. Minimum value is 1. Defaults to the numberOfValues option value.
Collapses or expands the facet depending on it's current state.
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.
HTMLElement for which to get the bound component.
Optional component class. If the HTMLElement has multiple components bound, you must specify which one you are targeting.
Boolean option to tell the method to not throw on error.
Allows the component to bind events and execute them only when it is enabled.
Contains the state of options for different components. Mainly used by ResultLink.
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.
A disabled component will not participate in the query, or listen to ComponentEvents.
Allows component to log in the dev console.
Contains the singleton that allows to trigger queries.
Contains the state of the query. Allows to get/set values. Trigger query state event when modified. Each component can listen to those events.
A reference to the root HTMLElement (the SearchInterface).
A reference to the root of every component, the SearchInterface.
The static ID that each component needs in order to be identified.
For example, SearchButton -> static ID: SearchButton -> className: CoveoSearchButton
A reference to the Analytics.client.
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:
data-base-path='electronics' data-base-path='electronics,laptops'
The label to display to clear the facet when a value is selected.
Default value is the localized string for AllCategories.
data-clear-label='Everything'
Whether this facet should be collapsed by default.
data-collapsed-by-default='true' data-collapsed-by-default='false'
Specifies a custom order by which to sort the dynamic hierarchical facet values.
Custom-ordered values won't necessarily retrieve values from the index.
Example:
<div
class="CoveoDynamicHierarchicalFacet"
data-field="@countries"
data-title="Countries"
data-tab="All"
data-clear-label="All Countries"
data-delimiting-character="|"
data-custom-sort="America, Asia|Japan, America|Mexico, America|Canada, Europe|Germany, Europe|France, Oceania"
></div>
data-custom-sort='foo'
If a custom sort is defined, this specifies the delimiter that separates paths from each other.
*Example:**
<div
class="CoveoDynamicHierarchicalFacet"
data-field="@countries"
data-title="Countries"
data-tab="All"
data-clear-label="All Countries"
data-delimiting-character="|"
data-custom-sort="America...Asia|Japan...America|Mexico...America|Canada...Europe|Germany...Europe|France...Oceania"
data-custom-sort-delimiting-character="..."
></div>
data-custom-sort-delimiting-character='foo'
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 >.
data-delimiting-character='>'
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.
data-depends-on='department'
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.
Whether to allow the end-user to expand and collapse this facet.
data-enable-collapse='true' data-enable-collapse='false'
Whether to allow the end-user to search the facet values.
data-enable-facet-search='true' data-enable-facet-search='false'
data-enable-more-less='true' data-enable-more-less='false'
Whether to scroll back to the top of the page whenever the end-user interacts with a facet.
data-enable-scroll-to-top='true' data-enable-scroll-to-top='false'
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.
data-field='@category'
Whether to exclude folded result parents when estimating result counts for facet values.
Note: The target folding field must be a facet field with the Use cache for nested queries options enabled (see Add or Edit a Field).
See also the Folding and FoldingForThread components.
Default: true.
data-filter-facet-count='true' data-filter-facet-count='false'
The heading level to use for the heading above the facet.
A value of 0 will render a div element instead.
Default: 2.
data-heading-level='10'
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.
data-id='productcategory'
Whether to notify the Breadcrumb component when toggling values in the facet.
data-include-in-breadcrumb='true' data-include-in-breadcrumb='false'
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.
data-injection-depth='1500'
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.
data-number-of-values='8'
The sort criterion to use for this facet.
Default (Search API): occurrences.
data-sort-criteria='alphanumeric'
The title to display at the top of the facet.
Default value is the localized string for NoTitle.
data-title='Product category'
A mapping of facet values to their desired captions.
Create a new Component. Resolve all IComponentBindings if not provided.
Create a new Logger for this component.
Attach the component to the SearchInterface.
The HTMLElement on which to create the component. Used to bind data on the element.
The unique identifier for this component. See: IComponentDefinition.ID. Used to generate the unique Coveo CSS class associated with every component.
The environment for every component. Optional, but omitting to provide one will impact performance.
The
DynamicHierarchicalFacetcomponent 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
fieldwith a special format to work correctly.Coveo for Salesforce Free
January 2020 Release (v2.7968)
Using Hierarchical Facets