object-dropdown (legacy docs)

These object-dropdown docs are out of date

New functionality and features were added to object-dropdown in version 4.84.0 of the JourneyApps runtime. Please refer to the latest docs here.

Initialization of Data in JavaScript

Object dropdowns use a database query or array to determine what objects are displayed in it.

Note: If there are more than 12 items displayed, a type-ahead filter is displayed.

<var name="all_items" type="query:item" />
<!-- OR -->
<var name="all_items_array" type="array:item" />

function init() {
     view.all_items = DB.item.all();
     // OR
     view.all_items_array = DB.item.all().toArray();
}

Storing the selected object in a variable

Since a dropdown list allows a user to select an option, you need a variable in which to store the selected object, and then specify that variable at bind="" in the list.

<var name="all_items" type="query:item" />
<var name="selected_item" type="item" />

<object-dropdown query="all_items" bind="selected_item" label="All Items:" />

Configuration

Option	Required	Details
query	required	Name of the query or array variable to populate the objects shown in the dropdown. Note that the sorting of the query will determine the sort order of the items in the dropdown.
display	optional	A format string which overrides the Data Model's default <display> tag to customize the String representation of each object in the list.
bind	required	The name of the variable in which the object that the user has selected must be stored. It must be an object of the same type as in query.
label	required	Text to display above the dropdown. It can be a format string to make the text dynamic. If not specified, defaults to the value of the field specified in bind. To have no label, specify label="".
required	optional	true if an object must be selected before proceeding to another view. Defaults to false.
on-change	optional	Function to call after a new value is selected. E.g. on-change="someFunction($value)"
show-if	optional	Controls whether the component is hidden or shown. The argument specified to show-if can either be a literal boolean value (true or false), or it can specify a variable, parameter or field that can be a string, number, object, etc. that evaluates to false or evaluates to true. If the component also specifies required="true", but it is hidden, the validation will be ignored/skipped.
hide-if	optional	The opposite of show-if (see above).
disabled	optional	true, false, a view variable (e.g. my_var) or the result of a function (e.g. $:shouldBeDisabled()). When resolved to true, the input is grayed out and not clickable (Available from JourneyApps Container v4.28.0)