Coveo Date Facet Range

The Coveo Dynamic Date Facet Range is now recommended over the Coveo Date Facet Range rendering.

Implements the Coveo JavaScript Search Framework FacetRange component to allow filtering of results based on a date field value, by selecting one or multiple date ranges.

Usage Notes

  • The Sitecore date field which the facet is based on must be included for indexing in the Templates table of the Indexing Manager (see About the Indexing Manager - Fields).

  • To use the Coveo Date Facet Range rendering with custom date ranges, create a content tree structure, such as the one below, containing a Custom Date Ranges item with children Date Range items. This structure can be placed anywhere in the content tree. You will reference the location of the Custom Date Ranges item in the Facet value ranges data source option (see Configure Custom Ranges for a Date Range or Numeric Range Facet).

    Dyn Date Facet Range required items

  • Any change to the facet value selections triggers a new Search API call.

Insertion Location

The Coveo Date Facet Range rendering is an Allowed Control in the following placeholder(s): Facets

Example insertion sequence for the Coveo Date Facet Range rendering.

Coveo for Sitecore SXA rendering insertion locations aren’t limited by placeholder Allowed Controls. The Coveo Date Facet Range rendering may therefore be inserted throughout the partial design, whether in Coveo for Sitecore or Sitecore placeholders.

Example insertion sequence for the Coveo Date Facet Range rendering.

Data Source Options

Option name Description
Title See title component option
Field See field component option
Facet name See id component option
Number of values See numberOfValues component option
Sort See sortCriteria component option
Date format The date format to use to display date values. Uses the Globalize JavaScript plugin format
Ignore accents in facet search See facetSearchIgnoreAccents component option
Allowed facet values See allowedValues component option
Facet value caption This option is exposed for legacy reasons.
Enable collapse button See enableCollapse component option
Enable settings button See enableSettings component option
Sort criteria displayed in the settings menu See availableSorts component option
Enable search for the facet See enableFacetSearch component option
Number of values to display in the facet search results See numberOfValuesInFacetSearch component option
Enable more/less button See enableMoreLess component option
Number of additional facet values to fetch when 'More' is clicked See pageSize component option
Include facet values in the omnibox Don't use this option. It is only exposed for legacy reasons.
Include facet values in the breadcrumb See includeInBreadcrumb component option
Maximum number of facet values displayed in the breadcrumb See numberOfValuesInBreadcrumb component option
Computed field See computedField component option. Not to be confused with a Sitecore computed index field.
Computed field operation See computedFieldOperation component option
Computed field format See computedFieldFormat component option
Computed field caption See computedFieldCaption component option
Is multi-value field See isMultiValueField component option
Facet uses the AND operator See useAnd component option
Allows user to select the facet operator See enableTogglingOperator component option
Facet accuracy determined by the number of scanned results Sets the injectionDepth component option to a preset value
Enable 'Save Facet State' option in Settings menu See enableSettingsFacetState component option
Preserve facet position under mouse on new facet query See preservePosition component option
Facet value ranges Specifies whether to use automatically generated date ranges or custom date ranges created in Sitecore.
DOM unique Id Randomly generated HTML element id.
Additional data attributes Allows use of the Coveo JavaScript Search Framework FacetRange component options that aren't directly available in the data source.

Sample Generated HTML and Corresponding Visual Output

In your Sitecore instance, you created a My Custom Date Ranges item using the /sitecore/templates/Coveo Hive/Custom Ranges Parameters/Custom Date Ranges template. Under this item, you created six range items using the /sitecore/templates/Coveo Hive/Custom Ranges Parameters/Date Range template. These range items divide the January 1, 2018 to December 31, 2020 timeframe into six half-year periods.

Image showing Coveo custom ranges configured in a Sitecore instance

In a Coveo Date Facet Range data source, in the Facet value ranges option, you select the My Custom Date Ranges item.

Generated HTML:

<div id="_351D3A2A-0326-48CE-A9CA-43D6AF8AFBEA" class="CoveoFacetRange"
data-prebind-field="fieldTranslator" data-field="@updated" data-id="last_update"
data-injection-depth="1000" data-sort-criteria="alphaascending"
data-title="Last Updated In"
data-ranges="[{"start":"2018-01-01T05:00:00.000Z","end":"2018-07-01T03:59:00.000Z","endInclusive":true,"label":"2018 (Jan-Jun)"},
{"start":"2018-07-01T04:00:00.000Z","end":"2019-01-01T04:59:00.000Z","endInclusive":true,"label":"2018 (Jul-Dec)"},
{"start":"2019-01-01T05:00:00.000Z","end":"2019-07-01T03:59:00.000Z","endInclusive":true,"label":"2019 (Jan-Jun)"},
{"start":"2019-07-01T04:00:00.000Z","end":"2020-01-01T04:59:00.000Z","endInclusive":true,"label":"2019 (Jul-Dec)"},
{"start":"2020-01-01T05:00:00.000Z","end":"2020-07-01T03:59:00.000Z","endInclusive":true,"label":"2020 (Jan-Jun)"},
{"start":"2020-07-01T04:00:00.000Z","end":"2021-01-01T04:59:00.000Z","endInclusive":true,"label":"2020 (Jul-Dec)"}]"
data-date-field="true" data-applied-prebind="true">

Facet visual output:

Image of date facet range associated with custom range items

Recommended Articles