Links

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.