object-list
Last updated
Last updated
An object-list
displays data from objects (from or ) in a visible way. It differs in this regard from the component, the latter needs to be selected by a user to display the data and allow them to select an option.
An object-list
can be customized in 3 ways:
object-list
All object-list
variations (see below) use a or to determine which objects to display.
object-list
This list can be used for display purposes only and doesn't allow the user to select anything.
object-list
This list allows the user to select one of the objects in it, which is then highlighted. The selected object is stored in a specified variable (specified using bind=""
see Configuration below).
A Selectable List is typically used in conjunction with a button — The user selects an object in the list, and then clicks a button to take an action — for example, calling a JavaScript/TypeScript function which does something with the object that the user selected (referencing the variable in which the selected object is stored), or follow a link (passing the selected object as a parameter to the next view)
object-list
This list allows the user to tap or click on a particular object, a specified JavaScript/TypeScript function is then called, and the object that the user selected is passed as an argument to the JavaScript/TypeScript function.
An arrow on the right side of the object-list
items hints to the user that the list items are clickable.
The JavaScript/TypeScript function that is called when the user taps on a list item is typically used to follow a link to a next screen — Therefore, a Clickable Regular List is used for similar cases as a Selectable Regular List, but it provides a better user experience because it requires less scrolling and tapping by the user.
Note that a function call of your choosing is specified at on-press=""
, which you then need to define in the view's JavaScript/TypeScript. The object that the user selected can be passed as an argument to this JavaScript/TypeScript function (clickedItem
in the example below) by using the special $selection
variable.
bind
label
Required
Default: unset
query
contains the name of the query or array variable to populate the objects in the object-list
.
required
display
Optional
Type: string
Default: The <display/>
tag of the object as defined in the app's data model
empty-message
Optional
Default: "No items to display"
Text that is displayed if no options are available to list once the user opens the object-list
.
show-if
and hide-if
The most common use case of a clickable list is to call a navigation when the user clicks on an item, and pass the clicked object as an argument to the link — which we show in this example below.
We can also call the link directly from the attribute:
bind
only applies to object-list
s.
required
only applies to object-list
s.
Specifies the display value of each option in the object-list
. Can be a static string, a or a .
Type: string
(static text, a or the return value of a )