Skip to main content

Oracle APEX: Open Specific Tab on Page Load Using Dynamic Parameter

While browsing the Oracle APEX discussion forum, I came across a useful workaround shared by a user named blue. 

His requirement was to activate a specific tab automatically when navigating from 

different pages — based on the redirect source, button click, or custom navigation logic.

In this blog, we will walk through how to achieve this behavior. I hope it helps you in similar APEX use cases.

Step 1: Create the Tab Container
Create a tab container region and assign it a Static ID
Static ID: TAB_MAIN

Template: Tabs
Tab Style: Pill

Step 2: Create Sub Tabs
Inside the main tab container, create three tabs and assign Static IDs:

Tab Label           Static ID
Emp              EMP
Dept           DEPT
Location           LOCATIONS

Step 3: Create a Hidden Page Item

Create a hidden page item named: P16_ACTIVE_TAB
This item will receive a value (e.g., EMP, DEPT, or LOCT) when navigating from another page. 
Based on this value, the corresponding tab will activate automatically on page load.

Pass_Value                Tab_Activated

Emp                                Emp Tab
Dept                                Dept Tab
Loct                                Location Tab

Step 4: Add the JavaScript

Paste the following code into Function and Global Variable Declaration 

setTimeout(function () {
    var activeTab = ($v("P16_ACTIVE_TAB") || "").toUpperCase();  

    if (activeTab === 'EMP') {
        apex.region("TAB_MAIN").widget().aTabs("getTabs")["#SR_EMP"].makeActive();  
    } else if (activeTab === 'DEPT') {
        apex.region("TAB_MAIN").widget().aTabs("getTabs")["#SR_DEPT"].makeActive();
    } else if (activeTab === 'LOCT') {
        apex.region("TAB_MAIN").widget().aTabs("getTabs")["#SR_LOCATIONS"].makeActive();
    }
}, 500);


P16_ACTIVE_TAB  - Hidden item used to pass the tab identifier
TAB_MAIN  - Static ID of main tab container 
SR_EMP, SR_DEPT, SR_LOCATIONS - Tab Static IDs with "SR_" prefix as required by APEX tab structure

With this setup, the correct tab will automatically activate based on the value passed into P16_ACTIVE_TAB, making navigation smoother and more intuitive for users.






Comments

Post a Comment

Popular posts from this blog

Reusable JS Functions for Field Validation in Oracle APEX Forms

 These reusable JavaScript functions provide client-side validation for Oracle APEX forms, improving data accuracy before submission. They allow developers to enforce mandatory fields and ensure certain fields contain only numeric values . By using these functions, APEX forms become more user-friendly and robust , reducing the chance of invalid data entry. Step 1: Create a Static Content region on the Global Page using the Blank with Attributes template. Step 2: Paste the following code into the HTML Source section of the region. <script>     function validateInputField(inputFieldId, pageItemName, errorMessage) {         $(inputFieldId).focusout(function() {             var itemValue = apex.item(pageItemName).getValue();             apex.message.clearErrors(pageItemName);             if (!itemValue) {               ...
Post a Comment
Read more

Reusable JavaScript Function to Highlight Holidays on APEX Date Picker Item

Date pickers are an essential part of web applications, especially when users need to select dates for bookings, reports, or scheduling tasks. However, in many business scenarios, certain dates like holidays, weekends, or special events need to be visually distinguished to prevent users from selecting them by mistake. In this blog, we will create a reusable JavaScript function that highlights holiday dates in an Oracle APEX date picker. This approach allows developers to call the function anywhere in their application, ensuring consistency and reducing redundant code. By the end, you’ll have a flexible solution to visually mark holidays on any date picker item in your APEX applications. Step 1: Create a Static Content region and set it to Blank with Content under the region attributes. Step 2: Inside that region, enclose a <script> tag and paste the following JavaScript function. function applyHolidayFormatterToDateItems(itemNames) {   const holidayList = [   ...
Post a Comment
Read more

Adding Custom Buttons to Oracle APEX Date Picker Footer (Set Start and End of Month)

In Oracle APEX, the built-in Date Picker is simple and functional — but sometimes, users need quick shortcuts for commonly used dates. For example, setting the first or last day of the current month with just one click can save time and reduce input errors. In this post, we’ll enhance the Oracle APEX Date Picker by adding two custom buttons — “Set Month Start” and “Set Month End” — directly inside the date picker footer. Using a small piece of jQuery code, you can seamlessly integrate these buttons without modifying the native APEX components. By the end of this guide, your Date Picker will not only look smarter but also provide a faster and more user-friendly experience.  ⚙️ This customization is created for learning purposes. Paste the below code on execute when page loads (js) apex.jQuery(document).on('focus', '#P20_START_DATE', function() {   var intervalId = setInterval(function() {     var $footer = apex.jQuery('.a-DatePicker-footer');     if ($f...
Post a Comment
Read more