object-dropdown
Overview
The object-dropdown UI component lists objects from a database query or array for selection by the user. Once an object, or multiple objects (since runtime version 4.84.0) are selected, they can be stored as a field, or used to further your app's workflow.
Basic Example
Binding a single object
<var name="countries" type="query:country" />
<!-- OR -->
<var name="countries" type="array:country" />
<var name="selected_country" type="country" />
<object-dropdown label="Country of residence" query="countries" bind="selected_country" required="false" />function init() {
view.countries = DB.country.all();
// OR
view.countries = DB.country.all().toArray();
}Binding multiple objects
<var name="countries" type="query:country" />
<!-- OR -->
<var name="countries" type="array:country" />
<var name="selected_countries" type="array:country" />
<object-dropdown label="Country of residence" query="countries" bind="selected_countries" required="false" />function init() {
view.countries = DB.country.all();
// OR
view.countries = DB.country.all().toArray();
}A selected option in the object-dropdown component:
List of options in the object-dropdown component:
Standard Attributes
bind
bindbindExample - bind to a single object:
<var name="countries" type="query:country" />
<var name="selected_country" type="country" />
<object-dropdown label="Country of residence" placeholder="Select a country" query="countries" bind="selected_country" required="false" />
Example - bind to an array:
<var name="countries" type="query:country" />
<var name="selected_countries" type="array:country" />
<object-dropdown label="Previous countries of residence" placeholder="Select all that apply" query="countries" bind="selected_countries" required="false" />
label
labellabelquery
queryRequired
Default: unset
query contains the name of the database query or array variable to populate the objects in the object-dropdown.
<var name="countries" type="query:country" />
<!-- OR -->
<var name="countries" type="array:country" />
<object-dropdown query="countries" bind="selected_country" required="false" />required
requiredrequiredAdvanced Attributes
align-content
align-contentalign-contentalign-dialog-content
align-dialog-contentOptional
Type: center | left | right
Default: center
Specifies how the content of the list of options dialog should be aligned. This includes the display value of each option, as well as the header text of the dialog.
<object-dropdown label="Country of residence" align-dialog-content="left" query="countries" bind="selected_country" />align-label
align-labelalign-labelclear-button-visibility
clear-button-visibilityclear-button-visibilitydialog-title
dialog-titleOptional
Type: string
Default: "Choose an option"
Header text of the dialog that displays the list of options of the object-dropdown.
<object-dropdown label="Country of residence" dialog-title="Choose the country of residence" query="countries" bind="selected_country" />disabled
disableddisableddisplay
displayOptional
Type: string
Default: The <display/> tag of the object as defined in the app's data model
Specifies the display value of each option in the object-dropdown list. Can be a static string, a format string or a JS/TS function.
<model name="country" label="Country">
<field name="name" label="Name" type="text:name"/>
<field name="population" label="Population" type="integer"/>
<display>{name}</display>
</model><!-- Here the display value for each option is the country's name and population, separated by a "-" -->
<object-dropdown label="Country of residence" display="{name} - {population}" query="countries" bind="selected_country" required="true" />empty-message
empty-messageOptional
Type: string (static text, a format string or the return value of a JS/TS function)
Default: unset
Text that is displayed if no options are available to list once the user opens the object-dropdown.
icon-position
icon-positionicon-positionid
ididlabel-case
label-caselabel-caselabel-color
label-colorlabel-colormodifier-text
modifier-textmodifier-texton-change
on-changeon-changeplaceholder
placeholderplaceholdersearch-controls
search-controlsOptional
Type: auto | none | show
Default: auto
Set the visibility of the search box of the object-dropdown component. auto shows the search box when the list of options contains 12 options or more. none never shows the search box, and show always shows the search box at the top of the list of options.
<object-dropdown label="Country of residence" query="countries" bind="selected_country" search-controls="show" />show-if and hide-if
show-ifhide-ifshow-if and hide-ifComponent Methods
The following component methods are available when an id is assigned to the component and component.objectDropdown({id:'my-id'}) is called from JS/TS:
clear
clearProgrammatically clear the selected value(s) bound to the object-dropdown.
clearSearch
clearSearchProgrammatically clear a value entered into the search box.
openDropdown
openDropdownProgrammatically open the list of items.
closeDropdown
closeDropdownProgrammatically close the list of items.
scrollDown
scrollDownProgrammatically scroll down the list of items when the object-dropdown is opened.
scrollIntoView
scrollIntoViewProgrammatically scroll until the object-dropdown is visible in the view.
scrollUp
scrollUpProgrammatically scroll up the list of items when the object-dropdown is opened.
selectItem
selectItemProgrammatically select an item from the list by its display value.
<var name="countries" type="query:country" />
<var name="selected_country" type="country" />
<object-dropdown id="my-dropdown" query="countries" bind="selected_country" label="Country" />function select() {
component.objectDropdown({id: 'my-dropdown'}).openDropdown(); // Need to open the dropdown first
component.objectDropdown({id: 'my-dropdown'}).selectItem("Germany");
}selectItemByIndex
selectItemByIndexProgrammatically select an item from the list by its index. Note: Indexes begin at 1.
<var name="countries" type="query:country" />
<var name="selected_country" type="country" />
<object-dropdown id="my-dropdown" query="countries" bind="selected_country" label="Country" />function select() {
component.objectDropdown({id: 'my-dropdown'}).openDropdown(); // Need to open the dropdown first
component.objectDropdown({id: 'my-dropdown'}).selectItemByIndex(2);
// Selects the second country in the list
}setSearch
setSearchProgrammatically enter a search value and triggers a search of the object-dropdown.
Last updated