Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

Modify Flex UI Keyboard Shortcuts


Flex UI 2.1 comes with default keyboard shortcuts. You can modify these shortcuts by remapping them to a different key. You can also edit properties of the default shortcuts, delete shortcuts, or add new custom shortcuts. Please be aware that when adding or remapping a shortcut, custom shortcuts will override the defaults if the same key is used. For example, if you use 1 to "return to active call", then it will override the "end currently selected task" shortcut and apply CTRL + SHIFT + 1 to the action you've set it to. It's also recommended to ensure that custom shortcuts do not conflict with browser or operating system shortcuts (such as CTRL + C, CTRL + V) which may be present. Changes to the shortcuts are reflected in the Keyboard Shortcuts discovery menu in Flex. You can access it under the user menu on the top right of the Flex UI.

You can make customizations to the default shortcuts using the following Flex API functions:

  • Flex.KeyboardShortcutManager.remapShortcut()
  • Flex.KeyboardShortcutManager.deleteShortcuts()
  • Flex.KeyboardShortcutManager.addShortcuts()
  • Flex.KeyboardShortcutManager.disableShortcuts()

The keyboard shortcut mappings use the modifiers CTRL + SHIFT along with a KEY. Flex provides the following default shortcuts:


_12
{
_12
0: { action: logout, name: "Logout" },
_12
1: { action: endSelectedTask, name: "End Selected Task", throttle: 1000 },
_12
A: { action: acceptTask, name: "Accept Task" },
_12
R: { action: rejectTask, name: "Reject Task" },
_12
T: { action: selectNextTask, name: "Select Next Task" },
_12
Y: { action: selectPreviousTask, name: "Select Previous Task" },
_12
S: { action: toggleActivityMenu, name: "Toggle Activity Menu" },
_12
H: { action: toggleHold, name: "Toggle Hold" },
_12
M: { action: toggleMute, name: "Toggle Mute" },
_12
C: { action: returnToCall, name: "Return To Call" }
_12
};

Shortcuts are constructed in the following way:


_10
X: { action: () => functionName(), name: "Shortcut Name", throttle: 0 }

ExampleDescriptionNotes
1The key which will trigger the shortcut.Only numbers and uppercase letters are valid.
endSelectedTaskThe function which is triggered by the shortcut.
End Selected TaskThe name of the shortcut which will be displayed in the Keyboard Shortcuts menu and in error messages if a shortcut does not work.
1000The throttle time in milliseconds which can be set to prevent the shortcut from being triggered again within the set amount of time. The user will see a notification if a shortcut is used repeatedly within the throttle limit time.Optional - Default value is 50ms to prevent Flex from being overloaded by repeated firings, and to provide a more seamless visual experience. You can set a higher throttle for destructive actions where a user may accidentally fire a shortcut multiple times by accident.

Only endSelectedTask has a configured throttle of 1000 ms. You can override this and the default throttle time for the other shortcuts by following the example in Remapping shortcuts.

Remap shortcuts

remap-shortcuts page anchor

You can modify and remap a keyboard shortcut to use a different key. You can change the default shortcut key to a different one using the following function:


_10
Flex.KeyboardShortcutManager.remapShortcut(oldKey, newKey,
_10
{ action: functionName(), name: "Shortcut Name", throttle: 0 }
_10
);

Flex.KeyboardShortcutManager takes three parameters:

  • oldKey - the letter of the key which the shortcut corresponds to (eg., "S" of the default keyboard shortcut table)
  • newKey - the new key to assign to the shortcut (the KeyboardEvent.key value of the new mapping)
  • Optional: Shortcut object - this can be passed if any modifications need to be made to the shortcut itself

Examples

examples page anchor

The following example will reassign the "Toggle Activity Menu" from CTRL + SHIFT + S (default) to CTRL + SHIFT + K:


_10
Flex.KeyboardShortcutManager.remapShortcut("S", "K");

The following example will reassign the "Toggle Activity Menu" from CTRL + SHIFT + S (default) to CTRL + SHIFT + K, as well as change the throttle time to 1000 ms:


_10
Flex.KeyboardShortcutManager.remapShortcut("S", "K", {
_10
action: Flex.defaultActions.toggleActivityMenu,
_10
name: "Toggle Activity Menu",
_10
throttle: 1000
_10
});


Delete default shortcuts

delete-default-shortcuts page anchor

You can delete one or more keyboard shortcuts using the following:


_10
Flex.KeyboardShortcutManager.deleteShortcuts(["S"]);


_10
Flex.KeyboardShortcutManager.deleteShortcuts(["S", "A", "1"]);

The shortcut of whichever key or keys are passed in an array to this function will be removed. The Keyboard Shortcuts menu will be updated to reflect the deletion.


You can add custom shortcuts to expand the functionality. The following examples show how native Flex actions or basic functionality can easily be integrated into shortcuts. It is also possible to write more complicated custom logic.


_11
import { Actions } from "@twilio/flex-ui";
_11
_11
const toggleDialpad = () => {
_11
Actions.invokeAction("ToggleOutboundDialer");
_11
};
_11
_11
_11
Flex.KeyboardShortcutManager.addShortcuts({
_11
5: { action: () => console.log("hello"), name: "Log hello" },
_11
D: { action: toggleDialpad, name: "Toggle dialpad", throttle: 100 }
_11
});

At a minimum, a shortcut needs to include the letter or number it maps to, an action, and a name such as:


_10
5: { action: () => console.log("hello"), name: "Log hello" }

Optionally, you can add a custom throttle.


You can disable shortcuts entirely by calling the following function:


_10
Flex.KeyboardShortcutManager.disableShortcuts();

This will remove the Keyboard Shortcuts menu entirely.


Rate this page: