Drop Down List
This page describes how to set up and configure the Drop Down List component to your dashboard.
The following example shows a Bubble Chart with a drop down list.
Set up a Drop Down List
To set up a Drop Down List component, click-and-drag the component into the workspace and configure the following:
-
Define the view state parameter to map to the dropdown.
-
Use either a data source or item list to populate your dropdown.
-
Give your dropdown a label, check Multi-select if required
Refer to Drop Down List properties described in the next section for details on additional properties.
Drop Down List properties
The following sections provides details on how to configure the properties of the Drop Down List component.
Basics
Open the Basics properties on the right and configure the properties described in the following table.
|
Field |
Description |
|---|---|
|
Name |
Enter a name for the component. |
|
Data Source |
Create a data source with the content of the dropdown menu. Using a data source automatically populates the dropdown, just ensure the data source has values in the correct format and type to pass into the linked Selected ValueView State Parameter. An optional text column can be included for value display names. The following screenshot shows a query for a drop down List data source.
The following sample query can be used if connecting to the sample data connection source q Copy
|
|
Selected Value |
The view state parameter populated by the dropdown selection. |
|
Label |
The label next to the dropdown.
|
|
Accept Empty Values |
When checked, an available null value is added to the selection
A dropdown with an empty-value option Note Null value must be part of available data When enabled, ensure the data column supplying the dropdown menu contains a null value. This will not add a null value if not already available. |
|
Force Selected Value |
When checked, the dropdown populates a Selected ValueView State Parameter with either the defined default or selected value. This ensures any associated queries dependent on the dropdown input will have a value assigned to the View State Parameter. Note Limited by available selection in dropdown If the dropdown View State Parameter is used by another user input, such as Text Input,, the View State Parameter uses the most recent, viable value. If an outside range value is set in a Text Input, the dropdown View State Parameter shows the last selected value BUT the View State Parameter updates to the (now) outside range value, which may break any query using the associated View State Parameter |
|
Multi-select |
When checked, multiple selections can be made from the dropdown list and the selected items passed to the Selected Value View State Parameter.
|
|
Show Search |
When checked, includes a search box for filtering results
|
|
Advanced Search |
Supports wildcard searches, along with |
|
Horizontal |
Set the horizontal alignment of items within the list. |
|
Vertical |
Set the vertical alignment of items within the list. |
|
Tooltip |
Enter a text description to appear when user mouses over the dropdown. |
|
Width |
Set the pixel width of menu and dropdown Label. If the Label is wider than Label Width, it wraps.
|
|
Label Width |
|
|
Field Summary Threshold |
How many items are shown in the input field before changing to summary. For example, 3 of 20 when value of |
|
Tooltip Summary Threshold |
How many items are shown in the tooltip before changing to summary. For example, 10 of 20 when value of |
|
'Select All' Value |
This is the value assigned to the Selected Value viewstate when all items are selected in the dropdown. In the absence of an all-select, each individual selected item is listed in the Selected Value viewstate. The default value is
Tip Configuration The defined value is used instead of the full list when all items are selected. That is, your backend must expect |
|
Sort List by Selected |
When checked and the dropdown is expanded to show the items available for selection, the selected values are displayed at the top of the list. |
Data Source Mapping
Configure the properties, described in the following table.
When a Data Source is used to populate the Drop Down List, the items of the Data Source are automatically assigned. For separate labels and values, use Data Source Mapping.
|
Field |
Description |
|---|---|
|
Value |
The column of the Data Source corresponding to the values to be passed into the Selected Value View State Parameter. |
|
Text |
The column of the Data Source corresponding to the text to be displayed as the dropdown options. |
Grouping
Configure the properties, described in the following table.
|
Field |
Description |
|---|---|
|
Use Group By |
When this is checked an extra level of nesting within the dropdown list is used. |
|
Group By |
This determines which datasource column is used to group by. |
Items
Configure the properties, described in the following table.
If Data Source is not used to populate a Drop Down List, individual values can be specified in the Items menu.
Custom
Customise dropdown selections with icons and icon colors
|
Field |
Description |
|---|---|
|
Icon |
The column of the Data Source corresponding to the values to be used as an Icon. |
|
Icon Color |
The column of the Data Source corresponding to the values to be used as the Icon color . Tip Configuration For Icon: You can set a font awesome class. For example "fa fa-book" sets the icon to a font awesome book icon. For Icon Color: You can use a hex or string color i.e. "red" or "#ff0000". |
Actions
Refer to Actions for details.
Style
Refer to Style for common settings.
|
Field |
Description |
|---|---|
|
Advanced CSS |