Adding Custom Oracle APEX Page Designer Shortcuts

Matt MulvaneyMatt Mulvaney
3 min read

A thing that has irked me a little bit recently is that I often try to Save and Run the APEX page in Page Designer by using the keyboard shortcut Ctrl+Alt+R.

When I do this, nothing happens. Nothing happens for the last 3 years, yet my brain still tries to do it.

Why do I do this… well ever since APEX 5.0 to APEX 21.2 the Save and Run shortcut has always been Ctrl+Alt+R. However since APEX 22.1, the shortcut is no Alt+F8.

I don’t get on with Alt+F8 because it requires 2 hands, with my right-hand leaving the mouse, whilst the Ctrl+Alt+R shortcut only requires my left hand.

So lets fix this. This solution keeps the Alt+F8 shortcut, whilst restoring Ctrl+Alt+R. It also reinstates Ctrl+Alt+S for saving the page.

I also provide a shortcut pair in the code to add you own mappings to actions. See the Add your own mappings section

Instructions

Here is what you need to do:

  1. Install Violentmonkey by clicking on the one of the Installation options. Alternatively, If you are unable to install Violentmonkey, this method also works absolutely fine in Tampermonkey.

  2. Open APEX Page Designer

  3. Click the Violentmonkey browser extension icon and click the ➕ icon

  4. Replace all the code with this code and click Save & Close

// ==UserScript==
// @name         Pretius Oracle APEX Page Designer Shortcuts (Global XYZ Style)
// @namespace    http://tampermonkey.net/
// @version      24.2.5
// @description  Global keyboard shortcuts for Oracle APEX Page Designer
// @match        *://*/ords/*
// @match        *://*/pls/*
// @grant        none
// @author       Matt Mulvaney - Pretius - @Matt_Mulvaney
// ==/UserScript==

(function() {
    'use strict';

    const shortcuts = [
        { combo: "Ctrl+Alt+R", action: "pd-save-run-page" },
        { combo: "Ctrl+Alt+S", action: "pd-save-page" }
    ];

    function isApexEnvironmentValid() {
        return typeof apex !== 'undefined' &&
            parseInt(apex.env.APP_ID, 10) >= 3000 &&
            parseInt(apex.env.APP_ID, 10) <= 8999;
    }

    function handleShortcut(action, event) {
        if (apex.actions && apex.actions.invoke) {
            // Pass both event and focusElement parameters required by APEX
            const focusElement = document.activeElement;
            apex.actions.invoke(action, event, focusElement);
        }
    }

    const XYZPageDesignerShortcuts = {
        initialize: function() {
            document.addEventListener('keydown', (e) => {
                if (!isApexEnvironmentValid()) return;

                // Build the pressed combination string
                const modifiers = [];
                if (e.ctrlKey) modifiers.push('Ctrl');
                if (e.altKey) modifiers.push('Alt');
                if (e.shiftKey) modifiers.push('Shift');
                const key = e.key.length === 1 ? e.key.toUpperCase() : e.key;

                const pressedCombo = [...modifiers, key].join('+');

                shortcuts.forEach(({combo, action}) => {
                    if (pressedCombo === combo) {
                        e.preventDefault();
                        e.stopPropagation();
                        handleShortcut(action, e);
                    }
                });
            });
        }
    };

    // Initialize after APEX is fully loaded
    if (document.querySelector('#apex') || window.apex) {
        XYZPageDesignerShortcuts.initialize();
    } else {
        document.addEventListener('apexready', XYZPageDesignerShortcuts.initialize);
    }
})();

Add your own mappings

You can add your own mappings by adding more shortcut/action pairs to the JSON below.

    const shortcuts = [
        { combo: "Ctrl+Alt+R", action: "pd-save-run-page" },
        { combo: "Ctrl+Alt+S", action: "pd-save-page" }
    ];

If you want to list all the available actions, just run this

apex.actions.list()

and it will give you a list looking like this

...
{name: 'pd-undo', label: 'Undo'}
{name: 'pd-redo', label: 'Redo'}
{name: 'pd-two-column', label: 'Two Pane Mode'}
{name: 'pd-three-column', label: 'Three Pane Mode'}
{name: 'pd-reset-tab-layout', label: 'Reset Layout'}
{name: 'pd-enable-tooltips', label: 'Toggle Tooltips'}
...

Current shortcuts can be viewed by running this

apex.actions.listShortcuts();

which will give you a list looking like this

...
{shortcut: 'Ctrl+Z', shortcutDisplay: 'Ctrl+Z', actionName: 'pd-undo', actionLabel: 'Undo'}
{shortcut: 'Ctrl+Y', shortcutDisplay: 'Ctrl+Y', actionName: 'pd-redo', actionLabel: 'Redo'}
{shortcut: 'Alt+F7', shortcutDisplay: 'Alt+F7', actionName: 'pd-save-page', actionLabel: 'Save'}
...

Do you have any more Page Designer hacks?

I do have Dracula Theme for Oracle APEX Page Designer.

ENJOY!

Whats the picture? A bike ride across The Stray. Visit Yorkshire!

1
Subscribe to my newsletter

Read articles from Matt Mulvaney directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Matt Mulvaney
Matt Mulvaney

With around 20 years on the job, Matt is one of the most experienced software developers at Pretius. He likes meeting new people, traveling to conferences, and working on different projects. He’s also a big sports fan (regularly watches Leeds United, Formula 1, and boxing), and not just as a spectator – he often starts his days on a mountain bike, to tune his mind.