All Collections
Dashboard
Control
How to pre-select a date range with a categorical control
How to pre-select a date range with a categorical control
Updated over a week ago

Desired setup

Single-choice dropdown control with the predefined periods:

  • Full range - all dates from the earliest to the latest in the Date type variable in the database;

  • Last year;

  • Last quarter;

  • Last month.

Date range control should behave as follows:

  1. Selectable span in the calendar should be limited by the option selected in the first control.

  2. Allow users to select a custom interval within the selected categorical span.

  3. When a user selects another predefined span from the dropdown control, the selectable span in the date range should switch accordingly, and the custom-selected interval resets to the full span.

The implementation on the dashboard

  1. Create a single-choice dropdown control with the required periods.

  2. Create two similar date range controls with the following settings:
    Categories: “ALL”, Selection strategy: “ALL”.

  3. Assign the dropdown control on both date range controls as a filter. The date span will be trimmed in both controls according to the applied filter.

  4. Assign the first date range control to select the second date range.

  5. Make the first date range control invisible.

  6. Assign the remaining visible date range control to its intended target.

The dynamics happening behind the scenes

When one control is used to filter another, it removes all values from the second control that do not match the filter. This means that both date ranges will be affected, and only the dates that fit the filter will be available for selection. The selectable span will be recalculated based on the new minimum and maximum values determined by the filter.

Both date range controls have their selection strategy set to "ALL". This means that their default selected interval is set to the full span, which depends on the applied filter. owever, if a user manually selects a custom interval in the date range, this selection will persist.

To override the user selection, we use an explicit "Select" assignment by the hidden date range control. This control triggers selection in the visible control whenever its selection changes. But because it is hidden, its selection changes only due to the switch of the dropdown control.

Here’s an example of the described setup:

Did this answer your question?