object-dropdown
Overview
Version compatibility
object-dropdown
is supported in all versions of the JourneyApps Container and Runtime.It received several functional updates in version 4.84.0 of the JourneyApps Runtime, including the ability to bind to an array, which allows a user to select multiple options.
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
Binding multiple objects
A selected option in the object-dropdown
component:
List of options in the object-dropdown
component:
Note
By default, when 12 or more options are listed in an object-dropdown
a search box appears at the top of the list of options. It can be used to more efficiently find an option. See the search-controls reference for more information.
Standard Attributes
bind
bind
Example - bind to a single object:
Example - bind to an array:
Version compatibility
Binding an object-dropdown
to an array was introduced in version 4.84.0 of the JourneyApps Runtime.
label
label
query
query
Required
Default: unset
query
contains the name of the database query or array variable to populate the objects in the object-dropdown
.
required
required
Advanced Attributes
align-content
align-content
Version compatibility
align-content
was introduced in version 4.84.0 of the JourneyApps Runtime.
align-dialog-content
align-dialog-content
Optional
Type: center
| left
| right
Default: center
Version compatibility
align-dialog-content
was introduced in version 4.84.0 of the JourneyApps Runtime.
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.
align-label
align-label
clear-button-visibility
clear-button-visibility
dialog-title
dialog-title
Optional
Type: string
Default: "Choose an option"
Version compatibility
dialog-title
was introduced in version 4.84.0 of the JourneyApps Runtime.
Header text of the dialog that displays the list of options of the object-dropdown
.
disabled
disabled
display
display
Optional
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.
empty-message
empty-message
Version compatibility
empty-message
was introduced in version 4.84.0 of the JourneyApps Runtime.
Optional
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-position
Version compatibility
icon-position
was introduced in version 4.86.1 of the JourneyApps Runtime.
id
id
label-case
label-case
Version compatibility
label-case
was introduced in version 4.84.0 of the JourneyApps Runtime.
label-color
label-color
modifier-text
modifier-text
Version compatibility
modifier-text
was introduced in version 4.84.0 of the JourneyApps Run
on-change
on-change
placeholder
placeholder
search-controls
search-controls
Optional
Type: auto
| none
| show
Default: auto
Version compatibility
search-controls
was introduced in version 4.84.0 of the JourneyApps Runtime.
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.
show-if
and hide-if
show-if
and hide-if
Component 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
clear
Programmatically clear the selected value(s) bound to the object-dropdown
.
clearSearch
clearSearch
Programmatically clear a value entered into the search box.
openDropdown
openDropdown
Programmatically open the list of items.
closeDropdown
closeDropdown
Programmatically close the list of items.
scrollDown
scrollDown
Programmatically scroll down the list of items when the object-dropdown
is opened.
scrollIntoView
scrollIntoView
Programmatically scroll until the object-dropdown
is visible in the view.
scrollUp
scrollUp
Programmatically scroll up the list of items when the object-dropdown
is opened.
selectItem
selectItem
Programmatically select an item from the list by its display value.
selectItemByIndex
selectItemByIndex
Programmatically select an item from the list by its index. Note: Indexes begin at 1.
setSearch
setSearch
Programmatically enter a search value and triggers a search of the object-dropdown
.
Last updated