# actionSheet

### Overview

{% hint style="info" %}
**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.
  {% endhint %}

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

```javascript
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* | <p>An array of:</p><ul><li>strings denoting the text of the options</li><li><p>objects with one or more of the following properties:</p><ul><li><code>text</code>: (string) The text of button</li><li><code>icon</code>: (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 <code>null</code>)</li><li><code>color</code>: (string) The color of the icon. Valid values include hex values (e.g. <code>#C0FFEE</code>) or named colors (e.g. <code>positive</code></li></ul></li></ul> |
| `options` | *Optional* | <p>An object with one or more of the following properties:<br></p><ul><li><code>title</code> (string) The title of the Action Sheet (defaults to <code>null</code>)</li></ul>                                                                                                                                                                                                                                                                                                                                                                                            |

### Appearance

#### Standard `actionSheet`

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

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-c3f49c9f6c0b0912ca3f499edacf7a19256e3a82%2Faction-sheet-example.png?alt=media)

#### `actionSheet` with icons

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

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-c2ab538ca2eb1be7de5f334f5b4c192e472f0b91%2Faction-sheet-icons.png?alt=media)

{% hint style="success" %}
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](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table) and [object-list](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-list) reference documentation.

See also [Icons](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/icons) for more information on the supported icons.
{% endhint %}