Keyboard Shortcut: Navigate Between Tabs in Frappe Forms (Alt + PageUp / Alt + PageDown)

ERPNext
,
1

Hi everyone,

I wanted to share a small client script that lets you switch between form tabs using keyboard shortcuts:

  • Alt + PageUp → Previous tab

  • Alt + PageDown → Next tab

This can make navigation a bit faster, especially when working with forms that have many tabs.

frappe.ui.form.on('POS Profile', {
    onload: function(frm) {
        // Bind the keydown event when the form is loaded
        $(document).on('keydown', function(e) {
            if (e.altKey && e.code === 'PageUp') {
                e.preventDefault();
                navigate_to_tab('previous');
            } else if (e.altKey && e.code === 'PageDown') {
                e.preventDefault();
                navigate_to_tab('next');
            }
        });
    }
});

function navigate_to_tab(direction) {
    let current_tab = $('.nav-link.active');
    let tabs = $('.nav-link');
    let current_index = tabs.index(current_tab);

    let target_index = null;

    if (direction === 'next') {
        target_index = current_index + 1 < tabs.length ? current_index + 1 : 0;
    } else if (direction === 'previous') {
        target_index = current_index - 1 >= 0 ? current_index - 1 : tabs.length - 1;
    }

    if (target_index !== null) {
        let target_tab = $(tabs[target_index]);
        target_tab.tab('show');
    }
}

Currently, this example is attached to the POS Profile doctype, but the same approach can be adapted for other doctypes or even made global.

If anyone has suggestions for making this cleaner or implementing it as a reusable feature across all forms, I’d love to hear your thoughts

1 Like