object-table (v1) (deprecated)

object-table v1 is considered deprecated

Support for object-table v1 may be dropped in future versions of the JourneyApps Runtime. Please upgrade your app to use object-table v3 to ensure that your app remains compatible with the JourneyApps Runtime.

Similar to object-list, object-tables can be customized in 3 ways:

• Non-Selectable

• Selectable

• Clickable

Initialization of Data in JavaScript

All object-tables use a Query or Array to determine what objects are displayed in it.

<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();
}

Non-Selectable Table

This table can be used for display purposes only and doesn't allow the user to select anything.

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

<object-table query="all_items" label="Snag List Items">
    <column heading="Number">{number}</column>
    <column heading="Name">{name}</column>
</object-table>

Selectable Table

This table 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 Table is typically used in conjunction with a button — The user selects an object in the table, and then clicks a button to take an action — for example call 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)

Since a Selectable Table allows the 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 object-table.

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

<object-table query="all_items" bind="selected_item" label="Snag List Items">
    <column heading="Number">{number}</column>
    <column heading="Name">{name}</column>
</object-table>

Clickable Table

This table allows the user to tap / "click" on a particular row/object, and a specified JavaScript/TypeScript function is then immediately called, and the object that the user selected is passed as an argument to the JavaScript/TypeScript function.

The JavaScript/TypeScript function that is called when the user taps on a row is typically used to follow a link to a next screen — Therefore, a Clickable Table is used for similar cases as a Selectable Table, but it provides a better user experience because it requires less scrolling and tapping by the user.

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

<object-table query="all_items" label="Snag List Items">
    <column heading="Number">{number}</column>
    <column heading="Name">{name}</column>

    <action on-press="selectItem" />
</object-table>

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.

The most common use case of a clickable table is to call a link 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.

function selectItem(clickedItem) {
    link.view_item(clickedItem);
}

We can also call the link directly from the on-press action:

<action on-press="link.view_item($selection)" />

The <action> tag has the following configuration:

Option	Required	Details
on-press	required	The JavaScript/TypeScript function call to be performed when the user clicks on an object in the table.
icon	optional	The icon to display on the right-hand side. Defaults to ion-chevron-right. (See Ionicons)
validate	optional	Whether to run field validation before calling the associated on-press (see above). Can be either true, false, or the result of a function, e.g. ($:shouldBeValidated()).

action icons whitelist removed

From version 4.27 of the JourneyApps Container, any Ionicon is allowed in icon.

Pre-v4.27, only ion-chevron-right, ion-more , ion-edit and ion-trash-a were allowed.

Note on appearance

The appearance of a Clickable Table on a mobile device is currently the same as a Non-Selectable Table.

Configuration

Option	Required	Details
query	required	Name of the query or array variable to populate the objects shown in the table. Note that the sorting of the query will determine the sort order of the items in the object-table. See Sorting for more information.
bind	optional	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. If bind is not specified, this table will be Non-Selectable.
label	required	Text to display above the table. It can be a XML String Formatting to make the text dynamic. If not specified, defaults to the value of the field specified in bind. To have no label, specify label="".
empty-message	optional	Text to display when the query is empty. Defaults to "No data".
required	optional	If this is a Selectable Table, setting required="true" will require the user to select an object before proceeding to a next view. Defaults to false.
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 (see the section Show/Hide Components for full details). 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).

Nested Tags — Columns

An object-table can contain any number of <column> tags that represent the vertical columns in the table. Not to be confused with the columns component used for tablet apps.

Each column contains a format string for the value of the column in each row — typically a field of the object.

A column may optionally have a heading attribute. If at least one column has a heading attribute, a header row will be added to the table with the headings of the columns.