atomic-timeframe-facet

This is for:

Developer

A facet is a list of values for a certain field occurring in the results. An atomic-timeframe-facet displays a facet of the results for the current query as date intervals.

Introduction

A facet allows users to drill down inside a result set by restricting the result to certain field values. The Timeframe Facet is used specifically with field values that are dates. An optional date picker is available to this facet, allowing users to set custom ranges.

User Experience and Best Practices

  • Users can search for items based on dates, such as: publication date, latest update date, submission date, etc.

  • Enabling the date picker allows users to set a custom date range, helping narrow results to a very specific range.

Properties

Property Attribute Description Type Default

dependsOn

The required facets and values for this facet to be displayed. Examples:

<atomic-facet facet-id="abc" field="objecttype" ...></atomic-facet>

<!-- To show the facet when any value is selected in the facet with id "abc": -->
<atomic-timeframe-facet
  depends-on-abc
  ...
></atomic-timeframe-facet>

<!-- To show the facet when value "doc" is selected in the facet with id "abc": -->
<atomic-timeframe-facet
  depends-on-abc="doc"
  ...
></atomic-timeframe-facet>

{ [x: string]: string; }

{}

facetId

facet-id

Specifies a unique identifier for the facet.

string | undefined

field

field

The field whose values you want to display in the facet.

string

'date'

filterFacetCount

filter-facet-count

Whether to exclude the parents of folded results when estimating the result count for each facet value.

boolean

true

headingLevel

heading-level

The heading level to use for the heading over the facet, from 1 to 6.

number

0

injectionDepth

injection-depth

The maximum number of results to scan in the index to ensure that the facet lists all potential facet values. Note: A high injectionDepth may negatively impact the facet request performance. Minimum: 0 Default: 1000

number

1000

isCollapsed

is-collapsed

Specifies whether the facet is collapsed. When the facet is the child of an atomic-facet-manager component, the facet manager controls this property.

boolean

false

label

label

The non-localized label for the facet. Used in the atomic-breadbox component through the bindings store.

string

'no-label'

max

max

The latest date to accept from user input when the withDatepicker option is enabled.

This value must be a valid date string in the format YYYY-MM-DD.

If this format is not respected, the date picker ignores this property, behaving as if no max value had been set.

See also MDN.

string | undefined

min

min

The earliest date to accept from user input when the withDatepicker option is enabled.

This value must be a valid date string in the format YYYY-MM-DD.

If this format is not respected, the date picker ignores this property, behaving as if no min value had been set.

See also MDN.

string | undefined

withDatePicker

with-date-picker

Whether this facet should contain an datepicker allowing users to set custom ranges.

boolean

false

Shadow Parts

Part Description

clear-button

The button that resets the actively selected facet values.

clear-button-icon

The clear button icon.

facet

The wrapper for the entire facet.

input-apply-button

The apply button for the custom range.

input-end

The input for the ending value of the custom date range.

input-label

The label for both the start and end input.

input-start

The input for the starting value of the custom date range.

label-button

The button that displays the label and allows to expand/collapse the facet.

label-button-icon

The label button icon.

placeholder

The placeholder shown before the first search is executed.

value-count

The facet value count, common for all displays.

value-label

The facet value label, common for all displays.

value-link

The facet value when display is 'link'.

value-link-selected

The selected facet value when display is 'link'.

values

The facet values container.