Skip to main content

Dropdown Widget

A lightweight but very capable dropdown/combobox widget for ThingWorx with multiselect capabilities that are easy to use. Can also be uses as an autocomplete widget that does search via a ThingWorx service.

Examples

Dropdown examples

Usage

Can be used as a drop-in replacement for the classic ThingWorx dropdown widget. It can also act like a combo box with multiselect capabilities. Can also function as an autocomplete widget that can do searches via a ThingWorx service. To use the widget as an autocomplete use the searchData, searchText properties, and the userSearched event.

Properties

PropertyTypeBindingDefaultDescription
CustomClassSTRING<>Enables you to define an html class to the top div of the widget. Multiple classes can be entered, separated by space.
TemplateLIST<Template1The widget template to use for this widget.
LabelSTRING(localized)<The text that is displayed above the input/textarea.
SecondaryLabelSTRING(localized)<Text that is displayed after label usually to mark a mandatory field.
ShowSecondaryLabelBOOLEAN<TRUEFlag property which decides whether or not to show the Secondary Label
ShowHelpIconBOOLEAN<FALSEWill enable a customizable icon on the right of the label, the icon will show the tooltip on hover for more documentation
HelpIconSTRING<Icon to be displayed on the right of the label when ShowHelpIcon is enabled.
TooltipSTRING(localized)<Optional tooltip used to display additional information. See Tooltip
TooltipAnchorSTRINGWidgetIf the tooltip should appear next to the Widget, or next to the cursor.
TooltipTypeLIST<TextThe widget tooltip type
TooltipMashupMASHUPNAME<Mashup to be used as a tooltip when TooltipType is set as Mashup
TooltipWidthNUMBERWidth of the tooltip. It won't be bigger than the Max-width set in the GlobalStyles for the Tooltip
TooltipHeightNUMBERHeight of the tooltip. Can only be set if TooltipType is set as HTML, Markdown or Mashup
dataINFOTABLE<Data that is bound to the dropdown widget
searchDataINFOTABLE<Allows usage of the widget as an autocomplete that does remote searches. This should be bound to the service that returns the search results. Using the same service for both the data and searchData is not supported. If the same service is used, is has to be added twice.
searchTextSTRING>No ResultsSearch string that is sent to the service that returns the search data. This is only updated if the searchData has a binding.
autoSelectFirstRowBOOLEANFALSEAutomatically select the first row of the dropdown when it is loaded in the mashup
selectedTextSTRING<>Get or set the value of the selected item
selectedItemsINFOTABLE<>Get or set the selected items via an infotable
tabSequenceINTEGER0Specifies the tab order of an element (when the "tab" button is used for navigating)
displayFieldFormatSTRING(localized)<Format: Optional instructions on how to format the textual data. Number formatting (eg. 0.00), Date formatting and expressions (eg. [[0.0]] km)
displayFieldFIELDNAMEThe infotable field which represents the data value
valueFieldFIELDNAMEField to use for SelectedText
sectionFieldFIELDNAMESplit the options into sections. This marks the field in the infotable to be used as the section
valueHtmlFieldFIELDNAMEOptional: The column containing the HTML code that is used to display the row. The HTML is sanitized before use.
disabledFieldFIELDNAMEOptional: The column containing a boolean indicating that the row is disabled and cannot be selected
cssClassesFieldFIELDNAMEOptional: The column containing the name of the classes that are applied to this row
placeholderSTRING(localized)<Select ValueText to display if there is no selection
multiselectBOOLEAN<FALSEAllow multiple items to be selected, also changing the way the select dropdown looks, splitting the selected items in chips
maxValuesShownNUMBER<200Change from chip multiselect to only show the number of selected items
maxValuesMessageSTRING(localized)<FALSEMessage displayed when more values than the maxValuesShown property are selected. Customize your message with the "{number}" token.
limitMultipleSelectINTEGER<0When using multi select you can set a limit on the amount of selections you can have
limitMultipleSelectMinINTEGER<0When using multi select you can set the minimum number of items you can have
selectByGroupBOOLEANFALSEUsed to enable the selection of all options under a specific group by clicking that option group's label.
allowDeselectBOOLEAN<FALSEThis will allow you to deselect a value on a single select dropdown. Make sure to set the placeholder property
showSearchBOOLEANTRUEWill display a search field in the dropdown
searchTextNoResultsSTRING(localized)No ResultsText to be displayed if there are no results based on the search
searchingTextSTRING(localized)Searching...Text to be displayed while loading new autocomplete results using an external service
searchPlaceholderSTRING(localized)SearchString value that will set the value of the input search placeholder text.
searchHighlightBOOLEANFALSEBoolean value that will highlight search results if set to TRUE.
closeOnSelectBOOLEANFALSEIf a row in the dropdown is selected, the dropdown will close
allowAddCustomBOOLEANFALSEAllow to dynamically add options to the select. The list of selected options can be obtained via the selectedText or selectedItems properties
disabledBOOLEAN<FALSEDisables or enables the dropdown so it can't be clicked
ShowDataLoadingBOOLEANTRUEShows a spinner icon when data is being loaded
anyRowsSelectedBOOLEAN>FALSEAre there any rows selected in the list
noRowsSelectedBOOLEAN>FALSEProperty that give a true/false if a row is selected or not

Services

PropertyTypeBindingDescription
openSERVICE<Opens the dropdown
closeSERVICE<Closes the dropdown
clearSelectedRowsSERVICE<Unselect all items

Events

PropertyTypeBindingDescription
userSearchedEVENT>Triggers when the user begins searching and the widget has a searchData binding
selectionClearedEVENT>Event that triggers when dropdown is deselected