Keyboard Shortcuts in Your APEX Applications

Taking Design Inspiration from APEX

APEX itself has keyboard shortcuts built into the builder. APEX 22.1 makes it easy to add shortcuts to your own applications.

You can follow along via APEX Instant Tips episode #94.

Navigating the APEX Documentation

It's a bit difficult to find the APEX documentation about this. It's hard to find via Google. The APEX JavaScript documentation doesn't have a search. I'll just post the full link here:
https://docs.oracle.com/en/database/oracle/apex/22.2/aexjs/actions.html#addShortcut

Implementing Keyboard Shortcuts

Creating a keyboard shortcut involves two javascript calls

apex.actions.add to create the action
apex.actions.addShortcut to map a keyboard combination to the action

It's easiest to provide an example of the code. The code below adds two shortcuts.

window.onload = function() {
    apex.actions.add({
        name: "page-help",
        label: "Get Page Help",
        action: function getPageHelp(){
                    $("[data-id=pageHelp]").click();
                }
    });

    apex.actions.addShortcut("Ctrl+Shift+H", "page-help");

    apex.actions.add({
        name: "page-item-help",
        label: "Get Item Help",
        action: function getItemHelp(){
                    $("*:focus").siblings()[0].click();
                }
    });

    apex.actions.addShortcut("Ctrl+Shift+I", "page-item-help");
}

You can create a application static file with the code above. Then reference the file in your application definition javascript files to make this available throughout the application.

The first shortcut summons the help page via ctrl-shift-H. The second pops the item help (for the item the cursor is in) via ctrl-shift-I.

Design Patterns and User Training

It's important to establish a design pattern for users to easily access and remember keyboard shortcuts. Training users to utilize these shortcuts is crucial for maximizing their effectiveness. I recommend adding help about the shortcuts themselves in the application about me and the page help page itself.

apex_debug