Dropdown
Dropdowns allow your customers to dynamically change the dashboard based on options they select.
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:
Dropdown
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 Option | Description |
|---|---|
| Label | This 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 tooltip | Enable 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. |
| Placeholder | This 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 Filtering | This 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 items | This 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 selection | This 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 Popover | This 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 Selection | When 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 Option | Description |
|---|---|
| Values | This 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. |
| Displays | This 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 Value | This 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 Selection | When 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 Option | Description |
|---|---|
| Dataset | This is a dataset defined on the dashboard which will be used to populate values for the dropdown |
| Values Field | From 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 Field | Also 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 option | If 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 Options | Pick 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.