The Region Display Selector component includes a couple of new features since version 5.0 of Application Express. This article gives an overview of the features that have been introduced and I’ll also mention some useful JavaScript code snippets to gain extra control over a Region Display Selector component. Let’s start with the new declarative, out-of-the-box functionalities. The properties mentioned below can all three be found under the Attributes page of a RDS component.
Declarative features
1. Mode
The Mode property determines how regions, that are part of a RDS, are shown on the page. The following two options are available:
- View Single Region. This was the only possible mode in pre-APEX 5.0 versions. Clicking a tab from the RDS will make the corresponding region visible and automatically hide all other regions. That way you can solely focus on the selected region while not having to pay attention to other parts of the page.
- Scroll Window. This option has been introduced in APEX 5.0. When clicking a tab this time, the page will scroll down or up to display the selected region, without hiding the other regions. The apex.oracle.com/ut application for example uses this mode extensively.
2. Include ‘Show All’
A Yes/No property that is only applicable in case of a View Single Region mode. When selecting Yes, the RDS includes a Show All tab, which purpose is to show all regions that are part of the RDS. In pre-APEX 5.0 versions, the Show All tab was not configurable and thus always visible. That’s why I wrote this blog post in the past as a work around to get rid of the Show All tab.
3. Remember Last Selection
Another Yes/No property that lets you create the sticky tab behaviour as seen in the pre-APEX 5.0 application builder. If selecting Yes, the region that you last selected will be reselected on the next page load. Otherwise, the first selectable region will be automatically selected.
“Hidden” features
1. Find out what tab has been clicked
The following code snippet will give back the region ID after selecting a tab from the Region Display Selector.
$('.apex-rds').data('onRegionChange', function(mode, activeTab) { console.log(activeTab.href); });
Source: https://community.oracle.com/thread/3720955
2. Don’t jump to the top of the page after selection
To prevent being taken to the top of the page after selecting a tab, execute the following JavaScript code on page load.
$('.apex-rds').data('showAllScrollOffset', function() { return false; });
Thank you so much for this blog. I spent a lot of time with a colleague to figure out to stop the page from scrolling to the top whenever I clicked on the RDS tabs. This saved me.
LikeLiked by 1 person
Thanks for the blog. Have been searching a while for the View Single Region mode.
Another problem I’m confronted with: the region display selector region does not resize with the screen. No horizontal scrollbar appears, so users are unable to reach some of the RDS tabs. Is there a way to add this scrollbar?
LikeLike
Hey Danny,
What APEX version and theme are you using? In Universal Theme, a left and/or right arrow is being shown on the RDS to horizontally scroll through the tabs if not all tabs are visible.
Anyway, a simple CSS rule override on the RDS region should be sufficient to display a horizontal scrollbar whenever necessary:
Hope that helps,
Nick
LikeLike
Hi Nick,
I’m using APEX v. 5.0.3, and having the same problem: if I go to a smaller screen, the Region Display selector never shows the arrows you told about, and I don’t know where to change the overflow-x attribute to shown, or something. When I use your sentence as css, it doesn’t affect the display selector tabs. Any idea of what can I do? Help much appreciated! ;)
LikeLike
Hi Juan,
I created an example on apex.oracle.com: https://apex.oracle.com/pls/apex/f?p=58006:140
The list of tabs in the region display selector includes arrows that let you slide through the tabs that are not visible. It’s pretty easy to reproduce this example:
– Create a RDS region: set Region Display Selector as type and choose the Standard template.
– Create a couple of sub regions and set their Region Display Selector attribute to Yes.
APEX will automatically display the blue navigation arrows if not all tabs in the RDS are visible.
Hope that helps,
Nick
LikeLike
Hi Nick,
Need your help..
Using above how can I set the value of hidden item( using Set Value in Dynamic Actions) and eventually pass it to the user session state.
$(‘.apex-rds’).data(‘onRegionChange’, function(mode, activeTab) {
console.log(activeTab.href);
});
Thanks,
Ram
LikeLike
Hey Ram,
You don’t need a dynamic action to set the value of a hidden item in this case. Simply use the $s function. Execute the below JavaScript code on page load. You’ll have to change the name of the hidden item of course.
The activeTab.href value is composed of a hash (#) sign followed by the Static ID attribute value of the selected region in the RDS (e.g. #financialRgn or #generalRgn).
The $s function sets the value of the hidden item on the client-side. Create a dynamic action to set the value in session state when the hidden item’s value changes:
– Event: Change
– Selection Type: Item(s)
– Item(s): P30_TAB_CLICKED
– Action: Execute PL/SQL Code
– PL/SQL Code: null;
– Page Items to Submit: P30_TAB_CLICKED
Nick
LikeLike
Hi Nick, followed the setting you suggested to assign a value to Hidden (‘Display only’ in my case) item “P30_TAB_CLICKED”.
However I am not getting any value against this item when running Code, instead its showing blank value.
My Requirement is to use the value of P30_TAB_CLICKED when various regions are getting clicked to define a show/hide condition for another page item.
LikeLike
I don’t think you can use a Display Only item in this case. It doesn’t allow you to set a value with JavaScript. Change the item type to Text Field and give it another try.
If you’re still having issues, it might be a good idea to reproduce your problem on apex.oracle.com and grant me developer access. That way I can take a closer look.
LikeLike
I have three region display selector. But there are not loading on same position (left aligned). First one is loading in left, second is loading in middle and third one is loading in right. Please suggest.
LikeLike
I’m sorry, but what is your exact question? What are you trying to achieve?
LikeLike
Hi Nick,
Thanks for the blog!
I’m trying to show/hide some tabs dynamically based on some checkbox items. I’ve created a Dynamic Action that fires a JavaScript code like $(‘a[href=#CR_SR_my-region-id]’).parent().show() (or hide()) and that is working fine. But even though setting these Dynamic Actions “Fire On Page Load” to YES, these tabs are not shown/hidden properly when the page is loaded for the 1st time (it looks to me some render sequence issue, I don’t know).
To achieve my goal I’m running the follow JavaScript on “Execute On Page Load” page
if ($v(“P1_MY_CHECKBOX”) == ‘YES’){
setTimeout(function(){
$(‘a[href=#CR_SR_my-region-id]’).parent().show();
}, 350);
}
and then everything is working apparently fine. The problem is that I don’t feel comfortable using that approach and I’d like to fire my “Execute On Page Load” code in the proper place/sequence when $(“.apex-rds”) or whatever is ready.
Do you have any idea how to address this?
LikeLike
Hi Rafael,
I have experienced similar issues when trying to manipulate a RDS on page load. As far as I know, it’s not possible to execute JavaScript code immediately after the RDS is completely loaded.
Why don’t you use a standard show/hide dynamic action on the region in your situation? Is it because you only want to show/hide the tab in the RDS and always show the corresponding region?
I do know that the tab in a RDS gets successfully shown/hidden when you show/hide its corresponding region, even when you enable “Fire On Page Load”.
Is that a feasible approach in your situation?
Best regards,
Nick
LikeLike
Hi Nick,
Thanks for replying.
That’s interesting… My RDS tab doesn’t get hidden when I hide my region. That’s exactly why I am having to execute $(‘a[href=#CR_SR_my-region]’).parent().hide(); and it’s not working on “Fire On Page Load”.
My setTimeout is working nicely, I just don’t like that approach depending on some unknown timer.
I thought maybe there was some $(“.apex-rds”).data(“onReadyThing”) LoL
Thanks again!
LikeLike
Just for curiosity: I had already tried execute that JavaScript code to show/hide in other places, like afterRegion, footer, etc and it didn’t work as well, so I decided to use that setTimeout.
LikeLike
I tried to reproduce your issue, but was unable to. When I create a “Fire On Page Load” dynamic action, it successfully hides the RDS tab.
Can you simulate your problem on apex.oracle.com and grant me developer access? That way I might be able to come up with a fix.
LikeLike
Hi Nick,
Workspace: OPENDEV
Username: Nick.Buytaert
Password: 123456
Application: 84746
The app has only two pages. Page 1 has a classic report with EMP and page 2 has a RDS region with 3 tabs and one of those shall only be shown if DEPTNO = 10.
As you will see, even though hiding the region of tab 3 on “Fire On Page Load”, its “tab” is still there and shouldn’t.
I’ve left a dynamic action set to never that does properly what I wanted using $(‘a[href=#CR_SR_tab3]’).parent().hide(); but I still have to code that setTimeout thing on “Execute on Page Load”to hide tab3 on the first time that page is loaded.
LikeLike
Thanks for the test case on apex.oracle.com.
The problem seems to be caused by the “Tabs Container” template on the RDS region. That template doesn’t work well in combination with show/hide dynamic actions.
I have changed the template to “Standard” and set the “Region Display Selector” attribute of the three sub regions to “Yes”. Now the show/hide dynamic action works as expected.
Nick
LikeLike
hi Nick,
How can I set the desired tab in page B from another page A.
Thanks,
Alfredo
LikeLike
That’s actually a challenging requirement. There’s no documented way to programmatically change a region display selector’s active tab, especially when you’re on a different page.
APEX uses a session storage item to remember the last selected tab. The key of such a session storage item looks like this: .19914.30.63934413904545027249.activeTab
The value of the session storage item contains the DOM ID of the last selected region prefixed with a hash sign (#). You can change this value from any page using JavaScript to set another tab in the RDS.
More information on session storage can be found here: http://www.w3schools.com/html/html5_webstorage.asp
LikeLike
Thanks Nick, sorry what I meant is I’m navigating from page A to page B in the same session. So let’s say I have 3 links in A and each corresponds to a different tab in B.
LikeLike
I think I got it:
in B (page 101)
1) Create a hidden item, say P101_TAB
2) Create a Page Load dynamic action
3) Dynamic Action, True = Execute Javascript Code
4) Code: $(‘.apex-rds li:nth-child(&P101_TAB.) > a’).trigger(‘click’);
in A (page 100)
Using a static list with URL looking like this:
f?p=&APP_ID.:101:&SESSION.::&DEBUG.:RP,RIR:P101_TAB:2:YES
Here the index is 2, i.e. the second tab, each list entry targets a different tab
LikeLiked by 1 person
Ohh, okay. Your solution looks fine.
Did you set the “Remember Last Selection” attribute of the RDS to “No” then? Because if you select “Yes” here, I believe there’s a chance that the activated tab will be the one that’s saved in session storage.
LikeLike
Yes I did set the “Remember Last Selection” to “No”, when it was “Yes” the desired tab still gets selected and highlighted, but the “remembered” tab is still highlighted with a line
LikeLike
Hey Nick,
This really helped me. Although I am creating a system for a Disability centre and I’m trying to link tables specific to a patient. So the tabs will only show entries for that specific patient. How do i go about doing this?
Please help
Hemisha
LikeLike
Hi Hemisha,
If you setup your Region Display Selector regions the right way, you should be able to make tabs conditional by putting a condition on the corresponding regions. If the condition for a region returns false, there won’t be a tab for it in the RDS.
Hope that helps,
Nick
LikeLike
Hey Nick,
Thanks for responding.
I created regions and added the forms but the where clause (condition) I added does not work, eg :
select OCCUPATIONAL_THERAPY_INDIV.STATS_FORM_ID as STATS_FORM_ID,
OCCUPATIONAL_THERAPY_INDIV.PATIENT_NAME as PATIENT_NAME,
OCCUPATIONAL_THERAPY_INDIV.MONTH as MONTH,
OCCUPATIONAL_THERAPY_INDIV.SIGNED as SIGNED,
OCCUPATIONAL_THERAPY_INDIV.PAT_ID as PAT_ID
from OCCUPATIONAL_THERAPY_INDIV OCCUPATIONAL_THERAPY_INDIV
where OCCUPATIONAL_THERAPY_INDIV.PAT_ID = :P5_PAT_ID
Can you please advise as to where I am going wrong :(
Thank you,
Hemisha
LikeLike
Maybe the P5_PAT_ID page item is not correctly set. Can you confirm that this page item has the expected value when running the page?
What happens if you replace the P5_PAT_ID page item with a fixed patient ID? Does that give you back the expected result?
Also, execute the query separately in SQL Workshop or SQL Developer and see if it returns the expected result.
Executing these actions should give you more insight into the actual problem.
LikeLike
Hey Nick,
Thank you so much for the response. The ‘where’ clause was not correctly set.
I have another issue regarding the region display selector, so for example; I want to add three region display selector on one page (OT, Nurse and Physio). The issue is that when adding classic reports within the regions, it duplicates the tabs for all (OT tabs are in Nurse aswell).
How can I keep them separate, so that only the tabs within the chosen section, is displayed?
Thanks so much,
Hemisha
LikeLike
Did you add the classic report regions as sub regions and set their “Region Display Selector” setting to “No” ?
LikeLike
Hey Nick,
Yes, I did add sub regions but I set the Region Display Selector to “Yes” because I need them to show only ones that we click on.
LikeLike
I have replied to your e-mail.
LikeLike
Hey Nick,
I have the same problem, is it possible to have multiple display selectors on one page?
LikeLike
Hello,
It seems not to be possible to have multiple region display selector regions on one page.
As an alternative, you can use Static Content regions and set their template to Tabs Container. Sub regions will then be transformed into a RDS like structure. However, there’s no Show All tab when using the Tabs Container template.
Nick
LikeLike
Hi Nick,
do you have any idea how i can go to specificate Tab in a Region clicking a Button (Lets say i have a region with 2 Tabs and ‘tab1’ has a Button) on Button click i want to access ‘tab2’.
thx in advance for your reply
LikeLike
Hello Franck,
You’ll first have to assign a static ID to the region that is linked with “Tab 2”. When the static ID is “subRgnNr2” for example, you can execute the following jQuery statement to programmatically go to “Tab 2”.
So your button should have the action “Redirect to URL”, then enter the below code in the “Target” setting.
Here’s a live example:
https://apex.oracle.com/pls/apex/f?p=58006:140
Hope this helps,
Nick
LikeLike
thx Nick for your answer,
but it does´nt somehow work for me.
hier arer my steps :
step1: Assign the ID to the Tab “subRgnNr2″
step2: Button action change to”redirect to URL”
step3: apply the JS code as given by you : javascript:apex.jQuery(“#subRgnNr2_tab a”).trigger(“click”);
do you see anything wrong in my Steps ?
thx for your help
LikeLike
I don’t see anything wrong with those steps. What APEX version are you using?
Can you reproduce the problem on apex.oracle.com and grant me workspace accesss? That makes it easy for me to take a look at what’s going on.
Nick
LikeLike
i am using Apex 5.0 !
please write to me under this Email: thefaned@gmail.com (for Access)
thank you for your help
LikeLike
That’s exactly what I was looking for. Thanks!
LikeLike
Hello,
Multiple region display selector regions is not possible, but how does the alternative work?
–
As an alternative, you can use Static Content regions and set their template to Tabs
Container. Sub regions will then be transformed into a RDS like structure. However, there’s
no Show All tab when using the Tabs Container template
–
I don’t understand how a Static Content can be transformed into a RDS structure.
Thanks for reply,
Astrid.
LikeLike
Hi Astrid,
I assume you’re using Universal Theme on APEX 5.x.
Follow these steps to create a Tabs Container region:
1. Create a “Static Content” region
2. Change the Template property of that region to “Tabs Container”
3. Create sub regions within the region from step 1 and 2
That should actually do it. Here’s an example page:
https://apex.oracle.com/pls/apex/f?p=58006:180
Nick
LikeLike
Hi,
I am using Oracle APEX 5.1 Universal theme.
I need to display an loading spinner when user clicks on any of the tabs in region display selector..
I have used the below code:
$(‘.apex-rds’).data(‘onRegionChange’, function(mode, activeTab) {
var lSpinner$ = apex.util.showSpinner();
console.log(activeTab.href);
var a = activeTab.href;
$(“#P4_TAB_SEL”).val(a);
if(a==”#INV”) {
INV_SUB.click();
}
else if(a==”#MAP”) {
MAP_SUB.click();
}
else {
INS_SUB.click();
}
});
But I am getting the spinner only after the report is loaded. Is there any way to achieve this.
Thanks,
Nivetha.
LikeLike
I’m not sure why the spinner doesn’t show immediately. Maybe it’s better to initiate the spinner on a click event. For example:
More information on apex.widget.waitPopup();
http://rimblas.com/blog/2015/08/enhancement-to-waitpopup-on-apex5/
Nick
LikeLike
Hi Nick! Nice post, very helpfull. Could you, please, give me some suggestion on my issue? I used RDS in Apex 4.2. Totally, I have 2 selected regions and 2 different start buttons. Each button starts calculations in different report. Everything is working fine but after submit with button B on region B , after refresh, my page starts on region A. How to fix this process to stay on region B after submit the page?
LikeLike
Hi Alex,
Create an hidden item on your page in which you store the ID of the element you last clicked. Examine the DOM and use JavaScript/jQuery code to achieve this.
Then, on page load, you can use the hidden item value to programmatically set the active tab. Use the jQuery trigger function. Here’s an example:
Good luck!
Nick
LikeLike