Implementing custom app hotkeys

In UI Bakery, you can implement custom hotkeys for your application if necessary. You can do this using UI Bakery actions and the hotkeys-js library. Check it out👇

1. Start by connecting the hotkeys-js library - navigate to the Custom code tab and add the following script tag:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hotkeys.min.js"></script>

You can find more information on connecting and using external JavaScript libraries here.

1. Next, set up a global action to define the hotkeys:

   1. Click on the app area or select your current page in the Pages tab to access the Settings of the current page (right side panel).

   2. For the On App Load/On Page Load trigger, click Create action.

   3. Add a JavaScript Code action and define your hotkeys and action calls in the code, for example:

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

1. Now, test the hotkey - run the action, focus the app area, and press the E keyboard key. This should open the browser alert.

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.

You can also refer to hotkeys-js documentation for additional information on defining hotkeys.

---

You can also further extend the code above and define a hotkey-action pairing assuming that you've already configured the actions that you'd like to trigger with the hotkeys, for example:

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();. Refer to this article for more details on calling actions from code.

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