actionSheet

Overview

Version and device compatibility

• actionSheet was introduced in version 4.15.0 of the JourneyApps Container.

• Support for `icon` and `color` was added in version 4.34.6 of the JourneyApps Container.

• Further visual updates were done in version 4.76.0 of JourneyApps Runtime.

• Compatible with all devices.

JourneyApps supports displaying Action Sheets to the user. Action Sheets need to be triggered from JavaScript/TypeScript.

var result = actionSheet(items, options);

The actionSheet() function will block until the user selects an option or cancels the modal. The function returns the index of the option selected, starting from 0 or -1 if the actionSheet was canceled.

Syntax reference

Parameter	Required	Details
items	Required	An array of: strings denoting the text of the options objects with one or more of the following properties: text: (string) The text of button icon: (string) The icon to display on the button, left of the text. The icon can be a Font Awesome icon or an Ionicons icon. (Defaults to null) color: (string) The color of the icon. Valid values include hex values (e.g. #C0FFEE) or named colors (e.g. positive
options	Optional	An object with one or more of the following properties: title (string) The title of the Action Sheet (defaults to null)

Appearance

Standard actionSheet

var result = actionSheet(['Edit', 'Move', 'Delete'], {title: 'Modify job'})

actionSheet with icons

var result = actionSheet(
    [
        { text: 'Edit', icon: 'fa-edit' },
        { text: 'Move', icon: 'fa-arrows-alt' },
        { text: 'Delete', icon: 'fa-trash' }
    ],
    { title: 'Modify job' }
);

If you use an on-press in an object-table or object-list, specify icon="ion-more" in the action attribute. This will cause the table or list's action button to display as three dots, indicating to the user that a list of actions will display. For more information, see the object-table and object-list reference documentation.

See also Icons for more information on the supported icons.