​
What it does

This component allows you to create a select input that your users can interact with to filter and group data on the dashboard.

There are three different configuration options:

Allows for a user to select a single value from a dropdown

​
Multiselect

Allows for a user to select multiple values from a dropdown

​
Toggle

Allows for a user to select a single value from a toggle view

​
Configuration

Setup Preferences

​
Basic Config

Configuration OptionDescription
LabelThis text is the label given to the dropdown select on the dashboard. The label is placed above the dropdown. This field can be empty.
Descriptive tooltipEnable this element and use the textfield that pops up to give a tooltip element to your users to hover over to understand what the dropdown/multiselect/toggle does.
PlaceholderThis is the message shown in the dropdown when no option has been selected by the user yet (this option is not available for the toggle)
Enable FilteringThis toggle controls whether or not the dropdown options menu is filterable. By default, the menu is filterable.
When filterable, a search input appears above the options that allows users to type text and filter down the options. This is recommended when your dropdown has a long list of options (this option is not available for the toggle).
Disable dropdown if there are no itemsThis toggle allows for you to disable the dropdown if no options are present for selection (this option is not available for the toggle).
Enable clearing selectionThis toggle controls whether or not the user can click the “x” button to clear the selected option.
By default, this feature is enabled, meaning that users can clear out the selected option in a dropdown.
Disabled clearing selections in order to ensure that the dropdown will always have a value.
Use Portal for PopoverThis toggle makes it so that the dropdown or multiselect components, when the dropdown portion is opened, won’t be cutoff when extending beyond a container or the embed frame.
Enable Dependency SelectionWhen enabled, you may create a dependency between this element and other elements on the dashboard. When this element is dependent on an element selected, it will be disabled until a value is selected by the user.

​
Manual vs. Query

There are two ways to supply options to the dropdown. Manual dropdowns allow you to provide hardcoded values. Query dropdowns allow you to specify the options based on a dataset defined on the dashboard. This is useful for when you want to dynamically populate the dropdown with options from you database

​
Manual Config

Manual dropdowns are powered by hardcoded lists of strings or numbers. You may provide only a Values list, in which case the values will be use to display the options.

The Values, Displays, and Default Value fields all take in inputs as javascript. This means that you must put quotes around strings. For example:

Invalid: [option-1, option-2, option-3]

Valid: ["option-1", "option-2", "option-3"]

Configuration OptionDescription
ValuesThis option takes in a list of strings and numbers. When a user selects an option from the dropdown, the associated value is what will be used in the SQL query to filter or group the data.
This list is defined as javascript and so you must use quotes on strings.
DisplaysThis option takes in a list of strings and numbers. This will define what the dropdown options look like when a user opens the dropdown.
When the user selects an option, the value used in the SQL query will be the corresponding Value option.
The Displays list should have the same number of elements as the Values list.
Default ValueThis option takes in a string or number. This defines what option the dropdown will start with when the page loads.
Use this option, in tandem with the disabling clearing selections, to ensure that the dropdown always has a value present.
Enable Dependency SelectionWhen enabled, you may create a dependency between this element and other elements on the dashboard. When this element is dependent on an element selected, it will be disabled until a value is selected by the user.

​
Query Config

Query dropdowns use a dataset to power the contents of the dropdown. You must define the dataset to power the dropdown using the SQL editor on the dashboard editing page.

Configuration OptionDescription
DatasetThis is a dataset defined on the dashboard which will be used to populate values for the dropdown
Values FieldFrom the selected dataset, the columns on the table are available to select for the values field. This field represents what value will be used when the dropdown is selected. If no display field is selected, this will also be used to display the options
Displays FieldAlso from the selected dataset, the columns on the table are available to select for the display field. The associated display will be shown in the dropdown. If the user selects that option, the value is what will be used in the variable.
Default to first optionIf you would like to make your dropdown start with a default value, you can select this option. We will then pick the first value from the dataset when we query it and load the dashboard with that value.
Sort OptionsPick from amongst the sort options to pick how you would like the dataset sorted in the dropdown or multiselect (not available for the toggle).

Use the DISTINCT statement in SQL to only pull a distinct list of options for the dropdown options

​
Variable Usage

In the SQL query, when using dropdown or toggle, use the following

--- basic usage:
WHERE 1=1
[[AND column_1 = {{name_of_dropdown_or_toggle}}]]

In the SQL query, when using multiselect, use the following

--- basic usage:
WHERE 1=1
[[AND column_1 in {{name_of_multiselect}}]]

​
Filtering

You can now filter directly your charts in the UI elements themselves. For more information on this process, see the filtering section of the overview page.

OverviewToggle