Skip to main content

Oracle APEX Detect multiple browser tabs

One complaint I often hear about APEX applications is, issues users may face when they open application in multiple browser tabs/windows. Some pages which contains only reports or dash board pages may work fine even when opened in multiple tabs/windows. However, some pages may have issues like wrongly updating session states, seeing mixed data from two separate records or worst case wrong data being updated to DB. General advise I give to users is, please use different browsers, if you want to open same application/page in two tabs.


But, can we somehow detect that user has opened more than one tab and show the message directly from the application itself? And the answer is, Yes, we can and here is the link to demo.

If you want to implement this technique in your APEX application or page, all you need to do is
  1. Download noMulTabs.js and add this JS file to your APEX application. If you are not sure what is the best way to do it, you can refer Adding JavaScript to an Application Express application section in JavaScript API Reference documentation.
  2. Create Dynamic Action in Page 0 which executes on "Page Load" event. Add "True" action which executes JavaScript code and put below JS code in code section.
          noMulTabs.detect();

That's it, you are good to go.

If you want only some pages in the application to be restricted from opening in multiple tabs, then you can achieve it by specifying "Server-side Condition" for Dynamic Action in Page 0.

If you want to change redirect URL or want to change the alert message, then you can do it using fallbackUrl and alrtMsg parameters. Same code below..

noMulTabs.detect({
 fallbackUrl: "http://www.enter-redirect-url.com/",
 alrtMsg: "Your Message goes here.."
});

How it works:

Logic is developed using
  1. A Browser Cookie: Default life span of Cookie is "Session". We can access Cookie value from JavaScript, as long as page is loaded from same domain. 
  2. window.name: Window.name value will last as long as the tab is opened and survives over page reloads.
Algorithm: 

On Page load
  1. If cookie value is empty or cookie has some value but it's not equal to current session id then go to Step 2, otherwise (i.e. Cookie value is same as current session id) go to Step 3.
  2. Perform following actions
    • Save Current Session ID to Cookie
    • Append Current Session ID to window.name
  3. Check if window.name contains Current Session ID, If yes, then do nothing. If no, then execute redirect logic.
Note: When you are here and if you don't know about APEX_CLONE_SESSION, then please read about it here. If you want to enable users to use multiple tabs without having session state conflicts issues, then you can use this request value.

Tested with Firefox 68.3, Google Chrome 79.0 and Microsoft Edge 44.17763.831.0
APEX versions: 18.2, 19.2

Thank you.

Comments

Unknown said…
Hi ,
I did the steps mentioned by you. but the problem is if I am going to different page in the same window, then also it redirects to defined page. Can you guide me how that can be solved?
Hari said…
Hi, Which browser are you using? Can you post link to your demo application?
Unknown said…
Hi Hari,
Thanks for your reply, the issue is with all the browser I use. Mozilla 81.0 , Edge, and chrome 85.0.
Hari said…
Would it be possible to set-up an example to replicate your issue at apex.oracle.com and create a developer account for me and send details here?
Unknown said…
Hi Hari,
I found the issue. Actually there was a plug in my application which was causing the issue.
Thank you very much for the solution.
Unknown said…
Nice coding! thanks!

unfortunate with F5 the page also thinks it's a new tab since the cookie is there.
Is there a way to avoid this?

Thanks

Jerry
Hari said…
Hi Jerry,

Can you let me know which browser you are using? I don't see any issue with F5 or refresh option.

Also, would it be possible to set-up an example to replicate your issue at apex.oracle.com and create a developer account for me and send details here?

Regards,
Hari

Popular posts from this blog

Interactive Grid - Conditional Enable/Disable

In this blogpost, I am going to discuss few approaches using which we can conditionally enable/disable Interactive Grid (IG) column(s) based on other column(s) values. Note:    There is a bug  30801170  in APEX 19.2/20.1 with respect to "enable/disable" dynamic actions for IG columns. Workaround for this bug is provided at the end of this blogpost . This bug has been fixed in APEX version 20.2. Client Side Only Conditions If conditions to enable/disable are simple, then we can check those conditions easily on the client side. For e.g. let's consider IG on EMP table with following SQL Query. SELECT EMPNO, ENAME, JOB, MGR, HIREDATE, SAL, COMM, DEPTNO FROM EMP Let's consider the requirement as - Enable "Commission" column only when JOB is equals to 'SALESMAN' and disable "Commission" column in all other cases. This can be done declaratively using dynamic actions (DA) DA "Enable/Disable Commission - 1" Create DA and give it a prope

Interactive Grid - Bulk Operation on Selected Rows

What's the Problem? Let's say you have an IG on employee table and you want to update selected employees commission based on user's input. Ideally, it should be very simple, where you can write UPDATE statement in page process and select IG region as "Editable Region" under "Execution Options" of the page process. But, when you select rows and submit page, you can see that, this process won't get executed! The reason is  Selection of 'Row Selector' check-boxes is not considered as row-change. Thus selected rows are not submitted to server. So, is there any work around?  Yes! Luckily there are lot of JavaScript (JS) APIs available to work with IG. If you are not already aware, you can refer "APEX IG Cookbook"  or  JavaScript API Reference documentation. If we continue with above Employee IG example, when user selects IG rows, enters "Commission %" and clicks on "Update Commission" button, then we can writ

Interactive Grid - Process Filtered Data on Server Side

Recently one of the APEX developers has reached out to me and asked if it's possible to capture filtered rows data of the Interactive Grid on the server-side and do some processing. In APEX 20.1, there is a new API APEX_IG , using which we can achieve this. Photo by Jakub Kapusnak on Unsplash The approach is very simple and straightforward. Get the internal region id based on the Static ID given for the IG region Get the last viewed report id based on region id Open query context for the region and report using region id and report id Fetch and loop through the rows using the query context Do something with fetched rows And finally, close the query context If you have already done this for interactive reports, then you should be already aware of these steps. The only difference here is, we use APEX_IG APIs instead of APEX_IR APIs. For the demo purpose, let's Build an Interactive Grid on EMP table and let's give it a Static ID as emp Create a Textarea page item with