Set Active Tab in Oracle APEX

Recently, I faced a business requirement.

After redirecting to the page, set the specific tab to the active state.

To make it more complex, the target page has many tabs and subtabs.

Usually, Jon Dixon’s blog has everything I need, but this time his blog post about tabs was not enough :) Read it here if you want - it’s a good one.

You can also try this solution I’ve found here. However, I prefer my way - less code is better :)

Ok, here are my ideas.

1. “Remember Active Tab” (this is not the way)

That could be your first thought, but this is not what we want.

This setting will remember the last tab you selected.

2. Create a Dynamic Action that will click a specific tab (this is the way)

First, add “Static ID” to all the tabs you want to control.

Now, let’s say I want to open a parent tab “Employees”.

1. I’ve created a button called “OpenTabEmployees”

2. Created a Dynamic Action triggered on the click of that button:

   1. 

$("a[href='#SR_tab-employees']").trigger("click");

Things get a little more complicated if my target is the Sub Tab of “TabEmployees” in the “People” tab.

Then, I need to “click” on TabEmployees and People.

So the Dynamic Action code will look like this.

$("a[href='#SR_tab-employees']").trigger("click");
$("a[href='#SR_sub-tab-people']").trigger("click");

What if you want to trigger a certain tab when redirecting from another APEX page?

Define Dynamic Action on PageLoad and add a server-side condition to it.

I’ve created a hidden P3_ACTIVE_TAB item that can be set during a redirect from another page.

However, the target page will usually take longer to render, and Dynamic Action won’t work (it will click a tab that hasn't been rendered yet).

That’s why I need to add a small timeout to the On Page Load Dynamic Action, and the full JS code will look like this.

setTimeout(function() {
    $("a[href='#SR_tab-employees']").trigger("click");
    setTimeout(function() {
        $("a[href='#SR_sub-tab-people']").trigger("click");
    }, 200);
}, 500);

And the final result is:

I hope it helps to solve some of your issues :)

Cheers,

Rafal

PS If you know a better way to do this, e.g., using the official APEX JS API, feel free to add a comment.

PS 2 What’s the cover photo? It’s Denmark, Bornholm Island, 2011 (photo by me)