Mashup Builder > Widgets > Standard Widgets > Dropdown Widget (Themable)
Dropdown Widget (Themable)
* 
This widget replaces the Combo Box view of the legacy List widget.
The Dropdown widget enables you to add a drop-down menu that opens a list of items at run time. You can configure the widget for single or multiple selection. The selected items are stored in the widget SelectedText property that you can bind as input for other widgets, functions, or data services. You can define items and their state by creating a data a service that returns an infotable. The following are examples of configurations that you can perform using widget properties:
Align item labels to the left, right or center of the drop-down list
Enable single or multiple selection
Add a filter box to enable users to find items more quickly in long lists
Apply style formatting to the list items
* 
The Dropdown is available as a standard widget in the platform and as a web component that can be imported from an SDK.
Data Format
To configure the list items for Dropdown widget, you must create a data service that returns an infotable with the following field definitions:
Display Field
Value Field
State Field
Base Type
STRING
STRING
Boolean
Description
The label to display for the items in the drop-down list.
The actual value to use for each item. This value is used in the widget SelectedItems property when binding to other widgets or data services.
Specifies whether an item is enabled or disabled. You cannot select disabled items.
Row Example
English
en
True
Each row in the infotable defines an item in the drop-down list. You can configure your data service to generate items statically, or in a dynamic way based on input from other widgets or data services.
Binding List Items Data
To bind the configuration data to the drop-down widget, perform the following steps:
1. Add a Thing that contains a data service for the list items using the Data panel.
2. Bind the All Data property of a service to the widget Data property.
3. Bind the service to the Loaded mashup event.
4. On the Properties panel, specify which infotable columns to use to configure the drop-down list items:
DisplayField—Select the column to use for the item labels.
ValueField—Select the column to use for the actual values of the items.
StateField—Select the column to use for the state of the items.
5. Click Save, then View Mashup.
At run time, the list items are displayed when you open the drop-down list.
Setting the Space between the List and the Dropdown
Use the widget ListMarginTop property to specify the space between the Dropdown and items list. By default, the space is set to 8 pixels. To remove the space, set the property value to 0.
Adding an Item to Clear the Selection
By default, the Dropdown widget does not allow users to clear a list selections at run time. To allow users to clear selections at run time, enable the ClearSelectionItem property. An additional item that has a default label of (None) is added to the list. Users can select this item to avoid making a choice in the drop-down list.
Widget Properties
Property Name
Description
Base Type
Default Value
Bindable? (Y/N)
Localizable? (Y/N)
HintText
Displays placeholder text that explains what should be entered in the field.
STRING
Select..
Y
Y
Label
The text that is displayed as the widget label.
STRING
n/a
Y
Y
LabelAlignment
Enables you to align the label to the left, right, or center.
STRING
Left
Y
N
Alignment
Enables you to align the text items to the left, right or center in the drop-down list.
STRING
Left
Y
ClearSelectionItem
Adds a blank selection item to the drop-down list. Enables the user to clear a selection.
BOOLEAN
True
Y
ClearSelectionLabel
Specifies a custom text for the clear selection item in the drop-down list. It is set to None by default.
STRING
None
Y
Y
Disabled
Use this property to disable the widget in the mashup. The widget is displayed in the mashup but you cannot click it.
BOOLEAN
False
Y
N
ShowListFilter
Enables you to add a filter inside the dropdown list and allows you to filter the list items at run time.
BOOLEAN
False
N
N
FilterHintText
Displays a hint text for the dropdown list filter.
STRING
n/a
Y
Y
ListMaxHeight
Enables you to set a maximum height for the drop-down list that is displayed.
A scroll bar is added in the display if the number of items in the drop-down list is more than the list height that is set.
NUMBER
n/a
Y
N
StateField
The infotable that represents the state of the line items in the dropdown list.
This property can be used to enable or disable the line items in a dropdown list.
INFOTABLE
n/a
N
N
MultiSelect
Enables the user to select multiple items in the dropdown list.
BOOLEAN
False
N
N
AutoSelectFirstRow
Enables you to set the first row as the selected option in the dropdown list.
* 
This property is available to you when the MultiSelect property is not selected.
BOOLEAN
False
N
N
RowHeight
Enables you to set the row height for the single line.
NUMBER
34
Y
N
CustomClass
Enables you to define the CSS class to apply to the top div of the widget. Multiple classes can be entered, separated by space.
STRING
n/a
Y
N
TabSequence
The sequence of the widgets in which they are highlighted when the user presses Tab key.
NUMBER
n/a
N
N
Data
The infotable source.
INFOTABLE
n/a
Y
N
DisplayField
The infotable field that represents the data value.
n/a
n/a
N
N
ValueField
The field that is used for SelectedText.
n/a
n/a
N
N
SelectedText
Enables you to select an item in the list.
STRING
n/a
Y
Y
SelectedItems
The infotable source for the selected items in the list.
INFOTABLE
n/a
Y
N
ListFormat
Opens a dialog box that enables you to specify the rendered and the formatting rules for the widget data. In ThingWorx 9.1 and later, you can also apply state formatting to the widget.
Renderer and State Formatting
n/a
N
N
ListMarginTop
Sets the space between the Dropdown and the items list.
NUMBER
8
N
N
TooltipField
Displays a tooltip text when you hover over the label associated with the dropdown and the currently selected value in the dropdown.
* 
This property is available for ThingWorx version 9.3.0 and later.
STRING
n/a
Y
Y
TooltipIcon
Sets an icon image for the tooltip of the dropdown widget.
* 
This property is available for ThingWorx version 9.3.0 and later.
MEDIA ENTITY
n/a
N
N
Was this helpful?