I was recently working on a project for a customer who had a requirement for a form to display a tab region (tab container template) with two tab pages, and for the correct tab to be displayed depending on the value of another field in that form.
APEX, by default, displays the first sequenced region (tab page) in the tab container. I wanted to control the tab selection depending on the value selected by the user from a select list.
So, my sample application page has a region with two tabs. Currently on entry to my page the default selected tab is ‘Tab 1’ irrespective of whether the value in my select list, Region 1 Tab Selector, is ‘Select Tab 1’ or ‘Select Tab 2’.
I wanted to link the tab displayed to the selection of the value from the select list.
The solution was in creating a dynamic action for a “Change” event for the select list page item in question (P2_TAB_SELECT) setting a condition to test which Tab should be displayed. So, if P2_SELECT_TAB equals ‘Select Tab 1’ (static value ‘1’) the condition is TRUE. If P2_SELECT_TAB equals ‘Select Tab 2’ (static value ‘2’) the condition is FALSE
Then, for the Dynamic Action, create an ‘Execute JavaScript Code’ TRUE action for the condition above i.e. ‘Select Tab 1’ being selected, and an equivalent ‘Execute JavaScript
Code’ FALSE action for ‘Select Tab 2’ being selected.
Provide a Static ID (in Advanced Properties) for the tab container region and each of the tab sub-regions. So that:
Additionally, for the tab container region, ensure that in the template options the ‘Remember Active Tab’ option is checked.
APEX creates a list item with prefix “CR_SR_” for each sub-region tab in the tab container region.
Then, for each action use the code below where:
The sessionStorage object persists for as long as the window or tab is open. The sessionStorage.setItem(activeTab) method sets the active tab for the current session. So, by calling this method in the dynamic action, passing the appropriate tab name – #CR_SR_TAB_1 or #CR_SR_TAB_2 depending on the list item selected – the current session value can be overwritten and the active tab changed. So, this part of the code, alongside setting the ‘Remember Active Tab’ option above ensures that the correct tab will be selected on page entry.
The second line of javascript is activating the click action, as a user would by clicking on the tab. This part ensures that the tab selected is changed on data change of the P2_SELECT_TAB
Item.
When running the application, the user makes a selection from the associated select list, the appropriate tab will be displayed. The dynamic action should also be set to ‘Fire on Page Load’ to ensure the correct tab is shown when the page is first rendered.
Or
This also got me thinking about dynamic selection of regions in a Regional Display Selector.
APEX 5.0 allows developers to include/exclude ‘Show All’ declaratively, or choose whether or not to Remember Last Selection. However, it doesn’t provide the mechanism for declaratively selecting a particular region in a RDS, for example based on a condition at page load.
In my example, I would like the RDS region displayed at page load to be determined by the value of another page item (in this case P2_RDS_DISPLAY). In this case, P2_RDS_DISPLAY is just a display only text item, but it could equally be another item type. So:
For the page JavaScript: Execute when Page Loads, use the following code:
Note: “REGION1” used in the substitution string is the name given to the region’s Static ID.
So, when P2_RDS_DISPLAY = “All Regions”, ‘Show All’ is selected and all other regions are selectable
When P2_RDS_DISPLAY = “Region 1”, focus is on ‘Region 1’ and all other regions are selectable
If you would like to find out more information speak to one of our Oracle APEX experts, get in touch through enquiries@dsp.co.uk or book a meeting...
Author: Philip Ratcliffe
Job Title: Oracle APEX Development Consultant
Bio: Philip is a Development Consultant at DSP-Explorer. Building on considerable experience in development including using Oracle PL/SQL and supporting Oracle EBS, Philip is employing APEX to provide quality, bespoke software solutions to a range of organisations.
