Implementing custom app hotkeys

Implementing custom hotkeys in your apps is easy with UI Bakery actions and the hotkeys-js library. Here's how:

• Connect the hotkeys-js library: Go to the Custom Code tab and paste the code provided below. Refer to this guide for more information.

<script src="
https://cdn.jsdelivr.net/npm/hotkeys-js@3.10.1/dist/hotkeys.min.js
"></script>

• Set up a global action to define the hotkeys:

  • Access the settings sidebar of the current page (click on the app area or select the page in the Pages menu):

  • Select the On App Load (or On Page Load) trigger and click + Add Action, select the Code step:

  
• Define hotkeys and action calls: Add the following code to the action created in the previous step:

hotkeys('E', function(event, handler){
  event.preventDefault();
  alert('E');
});

• Test hotkeys: run the action, focus the app area, and press the E keyboard key. This should open up the browser alert. Use the hotkeys-js documentation for additional information on how to define the hotkeys.

The hotkeys will only work when the app area is focused. If the hotkeys don't work, try clicking on the app area to focus it.

• Now, this code can be extended to define a hotkey-action pairing, assuming that you already configured the actions that you'd like to trigger with the hotkeys:

hotkeys('ctrl+a,ctrl+b,r,f', async function (event, handler){
  switch (handler.key) {
    case 'ctrl+a':
      await actions.hotkeyA.trigger();
      break;
    case 'ctrl+b':
      await actions.hotkeyB.trigger();
      break;
    case 'r': 
      alert('you pressed r!');
      break;
    case 'f': 
      alert('you pressed f!');
      break;
  }
});

Notice how this example utilizes the ability to call UI Bakery actions using async/await syntax with await actions.hotkeyA.trigger();. More details on this topic are available here.

After defining and setting everything, reload the app to test the final setup. The hotkeys action will be executed upon page load, defining the hotkeys to activate the app's actions.