# shortcut

## Overview

The `shortcut` component allows developers to register view-level keyboard shortcuts for specified actions. 

**Note**: These shortcuts only persist while the user remains on the corresponding view. For use cases where shortcuts should persist across views, see the documentation for the [`ShortcutManager`](https://docs.journeyapps.com/reference/build/js-ts-apis/shortcutmanager) JS/TS API.

{% hint style="info" %}
**Version compatibility**

* `shortcut` was introduced in version **4.58.0** of the JourneyApps Runtime.
* Keyboard shortcuts are only supported on Desktop.
  {% endhint %}

### Basic Example

{% code title="main.view\.xml" %}

```xml
<shortcut keys="CTRL+I" name="Show dialog" action="$:showDialog()" />
```

{% endcode %}

{% code title="main.js" %}

```javascript
function showDialog() {
    journey.dialog.simple({
        title: "Success"
    })
}
```

{% endcode %}

### Reserved keys

The following keys are reserved and hence cannot be used as `keys`:

* CTRL+Z
* CTRL+SHIFT+Z
* CTRL+Y
* CTRL+C
* CTRL+V
* CTRL+R
* ESC
* ENTER
* BACKSPACE
* DELETE

OXIDE will show an error if a reserved key combination is used:

<figure><img src="https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2FDZ1guI663gjB1YGokkLE%2FScreen%20Shot%202022-08-31%20at%2011.02.42%20AM.png?alt=media&#x26;token=8c0c658a-d9f4-464e-994b-7a3ab0b9cb20" alt=""><figcaption></figcaption></figure>

## Standard Attributes

### `keys`

**Required**

**Type**: `string`

**Default**: unset

Specify a key or key combination for the shortcut. Only one key or key combination is supported.

Example:

```xml
<shortcut keys="CTRL+I" action="$:showDialog()" />
```

### `action`

**Required**

**Type**: JS/TS function

**Default**: unset

An event that calls a JS/TS [$:function](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml) or [navigation](https://docs.journeyapps.com/reference/get-started/journeyapps-fundamentals/view-navigation) when a user presses the key or key combination specified in the `keys` attribute.

{% code title="main.view\.xml" %}

```xml
<shortcut keys="CTRL+I" action="$:showDialog()" />
```

{% endcode %}

{% code title="main.js" %}

```javascript
function showDialog() {
    journey.dialog.simple({
        title: "Success"
    })
}
```

{% endcode %}

## Advanced Attributes

### `name`

**Optional**

**Type**: `string`

**Default**: unset

A human readable name to identify or describe the shortcut.