Use selectors

A selector is a type of element that, upon selection, can trigger an action. While there are many elements that support selections, a selector can only be added to the header and sidebar on the desktop view and to the drawer in the mobile view. These include the category, number, and date selectors.

Add a selector

Before adding a selector, you must add a header or sidebar to the desktop view or add a drawer to the mobile view.

To add a selector, complete the following steps:

  1. On the action bar, click the View button View to open the View pane.
  2. For the desktop view, click either the Header or Sidebar tab in the View pane, and do the following:
    1. Click Add selector.
    2. Choose a selector type, and begin configuring the selector.
  3. For the mobile view, click the Drawer tab in the View pane, and do either of the following:
    • Click Add selector, choose a selector type, and begin configuring the selector.
    • Click Copy selector to copy a selector configured in the desktop view.
      Note:
      When you copy a selector from the desktop view, all configuration settings are copied, except actions. To include actions on the mobile view, you must configure the actions on the selector again.

Configure a selector

On the Selector tab of the selector's configuration, you can specify properties specific to that selector type, such as how it's displayed. On the Actions tab, you can specify the actions to be triggered by the selector. Depending on where the selector is added, you can choose one of the following presentation modes for a selector:

Note:
Selectors added to the drawer on the mobile view always display in the drop-down mode.
  • Inline—The selector is always displayed. When using the Inline presentation mode for a selector in a sidebar, you can display the selector as a list or as a button bar.
  • Dropdown—The selector is displayed when a selection is being made and closes after the selection is made.
  • Accordion—For selectors in a sidebar, users can keep a selector's display expanded or collapsed.

Note:
In the desktop view, the amount of space selectors occupy can differ depending on how they are configured. Some selector presentation modes and display types are not possible on a header because it has a fixed height. If you can't configure a selector a particular way on a dashboard header, try adding the selector to the sidebar or choosing a different selector configuration.

Optionally, you can include an icon next to the selector label. After a selector has been added, you can change its settings by hovering over it and clicking the Configure element button Configure. You can also change the order in which selectors appear in the sidebar or header by clicking the Move buttons.

Category selector

You can base the categories in a category selector on a list of defined values, features, or summary statistics that are calculated at run time. You can use category selectors with categories derived from features to apply a spatial filter.

The Category selector is shown in the following image:

Category selector

For a category selector, if you choose the Inline presentation mode, you can choose whether the categories are displayed as a list or as a button bar. Accordion and Dropdown presentation modes display the categories as a list. You can also choose whether users can select a single category or multiple categories simultaneously by adjusting the Selection setting. For single category selection, you can turn on the Require selection toggle button and use Default selection to choose a default category.

You can turn on the Show search toggle button to allow users to search the list of categories when making selections. When multiple selections are enabled, authors can turn on the Show select all toggle to allow users to select all the categories.

If the selector is based on grouped values, the categories are automatically generated based on the field names in the data. You can change the display label for a category on the Selector tab by clicking Override in Settings, entering the category you want to change, and clicking Add. When the category is added, you can change its label. Optionally, you can click Load categories to add all the categories at once and change their labels.

Number selector

You can base a number selector on a single fixed value or a numeric range. You can choose a number spinner, slider, or a combination of both to allow dashboard users to select values . When both are chosen, users can input values using either the number spinner or the slider.

The number selector is shown in the following images:

Spinner number selector
Slider number selector

When configuring the spinner display type, you can include value limits and use the Increments option to specify the increments for the spinner values. You can turn on the Require value toggle button for the spinner display type and set a Default value. For the slider display type, a default value or a value range is required. You can also use the Precision option to specify the number of decimal points for the selector's values.

Date selector

You can configure a date selector to show defined date and time options or a date and time picker as shown in the following images:

Date selector defined date
Date selector slider and calendar

For date selectors with defined options, you can display the date and time options as either a list or a button bar. For date selectors that display the date picker, you can choose between the Calendar or Slider display type. You can also specify whether the users can choose a single date or range of dates, as well as the resolution, limits, and any default values for the date picker.

Depending on the type of date selector, you can turn on the Require selection toggle button to require a date selection and specify which dates are selected by default in the dashboard.

Note:

Date picker values are entered in the dashboard time zone. In filter actions for date selectors, the date, date only, and timestamp offset fields can be used as target fields. For date only, the target element is filtered based on the input date, and any time input is ignored.