Introduction: –
In modern web applications, users often open multiple tabs of the same page, which can lead to session conflicts, unexpected behavior, or data inconsistencies. To ensure a smooth user experience in Oracle APEX applications, we can implement a JavaScript-based mechanism to prevent multiple tabs from opening the same page.
The following technologies have been used to customize calendar template using APEX API in Oracle APEX.
- JavaScript
- Oracle APEX
Why we need to do: –
Having multiple instances of the same page open can cause several issues, including:
- Session Conflicts– When multiple tabs interact with the same session variables, it may lead to unexpected results.
- Data Overwriting– If a user submits a form in one tab while another tab is open, it may overwrite or duplicate data.
- Performance Issues– Multiple active tabs increase server requests, leading to unnecessary resource consumption.
- User Confusion– A user might perform actions in one tab while another is open, leading to inconsistency in UI behavior.
How do we solve:
We can use JavaScript’s localStorage API to detect and prevent multiple instances of the same page.
The following steps will help to customize calendar in Oracle APEX:
Step 1: Store a Flag in localStorage When the Page Loads
When the page loads, we check if another instance is already open. If so, we alert the user and attempt to close the duplicate tab. Otherwise, we set a flag in localStorage to indicate the page is open.
Step 2: Remove the Flag When the Tab is Closed
To ensure smooth behavior, we remove the flag from localStorage when the tab is closed or refreshed.
Step 3: Listen for Storage Events
If another tab is opened, we listen for changes in localStorage and immediately close the duplicate tab.
Code:
Copy and paste the following code in the Function and Global Variable Declaration section or if you want to achieve the same for across the application you can put it in the global page also.
// Prevent multiple tabs from opening the same page
if (localStorage.getItem(“isPageOpen”)) {
alert(“This page is already open in another tab. Please use the existing tab.”);
window.close();
window.location.href = “about:blank”;
} else {
localStorage.setItem(“isPageOpen”, “true”);
window.addEventListener(“beforeunload”, function() {
localStorage.removeItem(“isPageOpen”);
});
// Listen for storage events to detect duplicate tabs
window.addEventListener(“storage”, function(event) {
if (event.key === “isPageOpen” && event.newValue === “true”) {
alert(“This page is already open in another tab. Please use the existing tab.”);
window.close();
}
});
}
Result:
Conclusion:
By implementing this simple JavaScript solution, Oracle APEX developers can prevent users from opening multiple instances of the same page, ensuring better session management, improved performance, and a seamless user experience.
