Skip to content

Drop Down List#

Screenshot
A Drop Down List used with a Bubble Chart

Set up#

  1. Define the view state parameter to map to the dropdown.

  2. Use either a data source or item list to populate your dropdown.

  3. Give your dropdown a label, check Multi-select if required

Basics#

Screenshot

Name
A name for the component provided by the user.
Data Source

Create a data source with the content of the dropdown menu; using a data source will automatically populate the dropdown, just ensure the data source has values in the correct format and type to pass into the linked Selected Value View State Parameter. An optional text column can be included for value display names.

Screenshot
A query for a Drop Down List data source

A sample query to use is (if connecting to the sample data connection source htmlevalcongroup available in the sample demo dashboard set):

select distinct src from dfxQuote
Selected Value

The view state parameter populated by the dropdown selection.

Selected values

Label

The label next to the dropdown

Screenshot

Accept Empty Values

When checked, an available null value is added to the selection

Screenshot
A dropdown with an empty-value option

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 will populate a Selected Value View 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.

Limited by available selection in dropdown

Should the dropdown View State Parameter be used by another user input, e.g. Text Input, the View State Parameter will use the most recent, viable value. If an outside range value is set in a Text Input, the dropdown View State Parameter will show the last selected value BUT the View State Parameter will update 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.

Screenshot

Show Search

When checked, includes a search box for filtering results

Screenshot

Advanced Search
Supports wildcard searches, along with AND, OR and for excluding items from search using -, e.g. EUR and GBP, EUR or GBP, EUR -*GBP
Horizontal
Horizontal alignment of items within the list
Vertical
Vertical alignment of items within the list
Tooltip
Text description to appear when user mouses over the dropdown
Width
Label Width

Pixel width of menu and dropdown Label. If the Label is wider than Label Width, it will wrap.

Screenshot

Field Summary Threshold
How many items will be shown in the input field before changing to summary; e.g. 3 of 20 when value of 3 is set
Tooltip Summary Threshold
How many items will be shown in the tooltip before changing to summary; e.g. 10 of 20 when value of 10 is set
'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 will be listed in the Selected Value viewstate. The default value is all.

Screenshot

Configuration

The defined value will be used instead of the full list when all items are selected; i.e. your backend should expect all rather than the full list. This value can also be set as the default value if using a view state to ensure all items are selected on load.

Sort List by Selected
When checked and the dropdown is expanded to show the items available for selection, the selected values will be displayed at the top of the list.

Data Source Mapping#

Screenshot

When a Data Source is used to populate the Drop Down List, the items of the Data Source will automatically be assigned. For separate labels and values, use Data Source Mapping.

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#

Screenshot

Use Group By
If checked uses an extra level of nesting within the dropdown list
Group By
determines which datasource column is used to group by

Items#

Screenshot

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

Screenshot

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

Configuration

For Icon: We could set a font awesome class i.e. "fa fa-book" - this would set the icon to a font awesome book icon. For Icon Color: We could use a hex or string color i.e. "red" or "#ff0000" - this would set the icon color to red

Actions#

Actions

Style#

Style for common settings

Advanced CSS
Advanced CSS