Coveo Dynamic Hierarchical Facet

This is for:

In this article

Usage notes
Insertion location
Data source options
Sample generated HTML and corresponding visual output

Implements the Coveo JavaScript Search Framework DynamicHierarchicalFacet component to display a facet that renders values in a hierarchical fashion. The Coveo Dynamic Hierarchical Facet is an evolution over the Coveo Category Facet rendering, particularly because it implements Dynamic Navigation Experience.

Usage notes

To use the Coveo Dynamic Hierarchical Facet rendering, you first need to:
- have a content tree structure, such as the one below.
- create a Single-Line Text (or Multi-Line Text) field, such as the ParentCategories field in the example below, listing the paths to each parent folder of the item. See Insert a Category Facet - Example for more details about the format of values for this field.
- index that Single-Line Text or Multi-Line Text field as a multi-value facet.
To benefit from the automatic facet reordering functionality, group Coveo Dynamic Hierarchical Facet renderings and other dynamic facets (e.g., Coveo Dynamic Facets and Coveo Dynamic Numeric Facet Ranges) within a Coveo Dynamic Facet Manager.
Coveo Dynamic Hierarchical Facet renderings may also be used as standalone facets without a Coveo Dynamic Facet Manager.
Any change to the facet selection triggers a new Search API call.
You can display a dynamic facet only when a specific value is selected in another facet.
You can customize the CSS associated with this rendering.

Insertion location

Coveo Hive

The Coveo Dynamic Hierarchical Facet rendering is an Allowed Control in the following placeholder(s): Dynamic Facets, Facets

Example insertion sequence for the Coveo Dynamic Hierarchical Facet rendering.

Coveo Hive SXA

When you add the Coveo Dynamic Facet Manager SXA rendering, this adds a coveouidynamicfacetssxa placeholder. Insert your Coveo Dynamic Hierarchical Facet rendering in this coveouidynamicfacetssxa placeholder.

Example insertion sequence for the Coveo Dynamic Hierarchical Facet rendering.

Data source options

Option name Description

Option name	Description
Title	See the title component option.
Field	See the field component option.
Facet ID	See the id component option.
Depends on	The data source `Facet ID` value of another facet that this facet depends on. See the dependsOn component option.
Enable collapse	See the enableCollapse component option.
Facet collapsed by default	See the collapsedByDefault component option.
Enable more/less button	See the enableMoreLess component option.
Scroll back to the top of the page on interaction	See the enableScrollToTop component option.
Exclude folded result parents	See the filterFacetCount component option.
Notify the breadcrumb component	See the includeInBreadcrumb component option.
Facet accuracy determined by the number of scanned results	See the injectionDepth component option.
Coveo for Sitecore 5.0.943.3 Custom sort order	See the customSort component option.
Number of values	See the numberOfValues component option.
Coveo for Sitecore 5.0.943.3 Custom sort delimiting character	See the customSortDelimitingCharacter component option.
Mapping of facet values to the desired caption	See the valueCaption component option.
Clear facet label	See the clearLabel component option.
Delimiting character that specifies the hierarchical dependency	See the delimitingCharacter component option.
DOM unique ID	Randomly generated HTML element ID.
Additional data attributes	Allows use of the Coveo JavaScript Search Framework DynamicHierarchicalFacet component options that aren’t directly available in the data source.

Title

See the title component option.

Field

See the field component option.

Facet ID

See the id component option.

Depends on

The data source Facet ID value of another facet that this facet depends on. See the dependsOn component option.

Enable collapse

See the enableCollapse component option.

Facet collapsed by default

See the collapsedByDefault component option.

Enable more/less button

See the enableMoreLess component option.

Scroll back to the top of the page on interaction

See the enableScrollToTop component option.

Exclude folded result parents

See the filterFacetCount component option.

Notify the breadcrumb component

See the includeInBreadcrumb component option.

Facet accuracy determined by the number of scanned results

See the injectionDepth component option.

Coveo for Sitecore 5.0.943.3

Custom sort order

See the customSort component option.

Number of values

See the numberOfValues component option.

Coveo for Sitecore 5.0.943.3

Custom sort delimiting character

See the customSortDelimitingCharacter component option.

Mapping of facet values to the desired caption

See the valueCaption component option.

Clear facet label

See the clearLabel component option.

Delimiting character that specifies the hierarchical dependency

See the delimitingCharacter component option.

DOM unique ID

Randomly generated HTML element ID.

Additional data attributes

Allows use of the Coveo JavaScript Search Framework DynamicHierarchicalFacet component options that aren’t directly available in the data source.

Sample generated HTML and corresponding visual output

You have a structure such as the following in your Sitecore Content Editor.

You use a field called ParentCategories to specify the path to an item in that structure. The item selected in the above screenshot has the following ParentCategories value.

ParentCategory sample value | Coveo for Sitecore 5

Generated HTML:

<div id="coveodb691f83" class="CoveoDynamicHierarchicalFacet" data-prebind-field="fieldTranslator"
data-field="@parentcategories" data-title="Categories" data-id="Categories" data-injection-depth="1000"
data-delimiting-character="|" data-collapsed-by-default="true" data-enable-collapse="true"
data-enable-scroll-to-top="false" data-filter-facet-count="false" data-include-in-breadcrumb="true"
data-applied-prebind="true">

Visual output:

Dyn Hierarchical Facet animation | Coveo for Sitecore 5