Keyboard shortcuts provide a seamless user experience by enabling quick actions without requiring mouse clicks. In this blog, we will explore two different approaches to implement a Ctrl + Q shortcut in Oracle VBCS that triggers a console log when pressed.
Method 1: Using a Global Event Listener
Step 1: Create a Button in the Page Designer.
In Oracle VBCS, go to the Page Designer section. Drag and drop a Button onto the page. This button will act as the reference component for our implementation, even though the shortcut will work anywhere on the page.
Step 2: Assign an ID to the Button.
After adding the button, select it and go to the Properties Panel. Assign the id as ‘clickBtn’.
Step 3: Create an Action Chain.
Navigate to the Action Chains tab in VBCS. Click on + Create Action Chain and name it onPageLoadActionChain.
Step 4: Add the below code in Action Chain.
Once the action chain is created, open the onPageLoadActionChain.js file and add the following JavaScript code:
‘vb/action/actions‘,
‘vb/action/actionUtils‘,
], (
ActionChain,
Actions,
ActionUtils
) => {
‘use strict‘;
class onPageLoadActionChain extends ActionChain {
/**
* @param {Object} context
*/
async run(context) {
const { $page, $flow, $application, $constants, $variables } = context;
document.getElementById(“clickBtn”).addEventListener(“keydown”, function (event) {
if (event.ctrlKey && event.key === “q” ) {
event.preventDefault(); // Prevent the default browser save action
console.log(“click button triggered”);
}
});
}
}
return onPageLoadActionChain;
});
This script adds a global event listener to the document. When the user presses Ctrl + Q, it prevents any default browser action (like opening a menu) and logs a message in the console.
Step 5: Create an Event Listener in VBCS.
Now, go to the Event Listeners tab in VBCS. Click + Create Event Listener and set the following:
- Event Type: Select VBEnter.
- Action: Choose the onPageLoadActionChain action.
Step 6: Click on Preview.
After setting up the action chain and event listener, click on the Preview button in VBCS.
- Once the page loads, press Ctrl + Q on your keyboard.
- Open the Console (F12 → Console Tab) and check for the message.
Method 2: Using an Action Chain with a Button Event
An alternative approach is to trigger the keyboard shortcut only when focusing on a specific button. This method binds the shortcut to a button keydown event using an action chain with a parameter.
Steps to Implement the Shortcut Using a Button Event
Step 1: Create Another Button.
In the Page Designer, add a second button and set its ID as click2Btn. This button will be used to listen for the Ctrl + Q shortcut when it is focused.
Create an Action Chain: Navigate to the Action Chains tab, click + Create Action Chain, and name it click2BtnActionChain.
Step 2: Add a Parameter to Capture the Keydown Event
Inside click2BtnActionChain, create a parameter named event. This parameter will store the keyboard event details when the action chain is triggered.
Step 3: Insert the Code in the Action Chain
Edit the click2BtnActionChain.js file and add the following JavaScript code:
This code checks if the Ctrl + Q keys are pressed while the click2Btn button is focused. If detected, it logs a message to the console.
‘vb/action/actions‘,
‘vb/action/actionUtils‘,
], (
ActionChain,
Actions,
ActionUtils
) => {
‘use strict‘;
class click2BtnActionChain extends ActionChain {
/**
* @param {Object} context
* @param {Object} params
* @param {any} params.event
*/
async run(context, { event }) {
const { $page, $flow, $application, $constants, $variables } = context;
if (event.ctrlKey && event.key === “q”) {
console.log(‘click2 button is triggered ‘)
}
}
}
return click2BtnActionChain;
});
Step 4: Attach an Event to the Button
Go to Page Designer, select the click2Btn button, navigate to the Events tab, and click + Create Event.
Step 5: Select the Keydown Event
In the event settings, choose the keydown event and link it to the click2BtnActionChain action chain.
Step 6: Assign the Event Parameter
Ensure that the event parameter is assigned as $event, so that the key press details are passed to the action chain.
Step 7: Preview and Test the Shortcut
Click Preview, then focus on the click2Btn button by clicking it. Press Ctrl + Q and open the Console (F12 → Console Tab) to check for the message.
Disadvantages of Using Action Chains method for Keyboard Shortcuts
- 1.
Requires Focus on a Specific Element – The shortcut works only when the assigned button is focused, limiting its usability compared to a global event listener.
- 2.
Not Suitable for Global Shortcuts – If the user clicks outside the button or interacts with another part of the page, the shortcut will not work.
- 3.
More Overhead – Action chains require additional setup, including defining parameters and manually binding events, which can be complex and time-consuming.
- 4.
Limited Performance Efficiency – Compared to direct JavaScript event listeners, action chains introduce additional processing steps, which might slightly impact performance, especially if used frequently.
Conclusion
Implementing keyboard shortcuts in Oracle Visual Builder Studio (VBCS) enhances user experience by enabling quick actions without relying on mouse clicks. We explored two approaches—using a global event listener for broader accessibility and an action chain method tied to a button event. While both methods effectively trigger a shortcut, the global event listener provides more flexibility, whereas the action chain approach requires user focus on a specific element.
For an optimal experience, consider your application’s requirements and choose the method that best aligns with your workflow. Want to explore more VBCS enhancements? Stay tuned for our next insights!
