Add keyboard shortcuts

Make your app more accessible and user-friendly with keyboard shortcuts (also called key event handlers or keyboard event handlers in Appfarm Create).

Draft feature

Draft features are in early development and may crash your solution. Functionality may stop working or crash your solution when Appfarm Create is updated.

Improve the usability of your app by implementing keyboard shortcuts for important and frequently used functionality. A keyboard shortcut triggers an action, allowing users to work more efficiently and making your app accessible to more users.

Keyboard shortcuts are configured per view, including dialogs and drawers. If multiple views are visible, including an open drawer, all keyboard shortcuts for those views will be available. The exception is when a dialog is open, and all other keyboard shortcuts are disabled.

To view the keyboard shortcuts available in the current view on the client, press the F1 key.

Best practices

• Don't override native browser or operating system shortcuts.

• Include references to your keyboard shortcuts in menus and tooltips to improve discoverability.

Configuration

Add a keyboard shortcut to a view by following these steps:

1. In the UI Editor, select the view, dialog, or drawer where you'd like to add the shortcut.

2. In the Component Properties, locate Keyboard Event Handlers to add a new event handler.

3. Fill in the required properties.

Key binding

A string representation of the key combination used to trigger an action. Use + to combine multiple key bindings.

Supported modifiers: ⇧, shift, option, ⌥, alt, ctrl, command, ⌘

Supported special keys: backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, delete, F1 - F19

Enable On Form Fields

Enable the shortcut when form fields such as text edit and switch are focused. This should typically be left disabled to avoid conflicts.

Action

The action to trigger when the shortcut is pressed.

Description

A short description of the shortcut. Translatable. This is displayed in the dialog that lists all shortcuts available in a view, triggered by pressing F1 in the client.

Disabled

A condition to disable the shortcut.