Working with Region Display Selectors in APEX 5.0

Date: May 2, 2016Author: Nick Buytaert

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;
});

Source: https://community.oracle.com/thread/3798279

46 thoughts on “Working with Region Display Selectors in APEX 5.0”

Add Comment

Sriram Iyer says:

May 27, 2016 at 18:17

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
Danny van Aken says:

May 30, 2016 at 11:08

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
1. Nick Buytaert says:
  
  June 1, 2016 at 14:21
  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:
```
.apex-rds {
  overflow-x: auto !important;
}
```
  Hope that helps,
  Nick
  
  LikeLike
  1. Juan says:
    
    October 5, 2016 at 15:56
    
    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
    1. Nick Buytaert says:
      
      October 6, 2016 at 13:16
      
      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
Ram says:

August 25, 2016 at 22:51

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
1. Nick Buytaert says:
  
  August 27, 2016 at 11:50
  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.
```
$(".apex-rds").data("onRegionChange", function(mode, activeTab) {
  $s('P30_TAB_CLICKED', activeTab.href);
});
```
  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
  1. Amex says:
    
    November 28, 2016 at 12:49
    
    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
    1. Nick Buytaert says:
      
      December 7, 2016 at 08:58
      
      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
Md. Rubel Pasha says:

September 3, 2016 at 12:43

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
1. Nick Buytaert says:
  
  September 4, 2016 at 11:27
  
  I’m sorry, but what is your exact question? What are you trying to achieve?
  
  LikeLike
Rafael Trevisan says:

September 13, 2016 at 18:02

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
1. Nick Buytaert says:
  
  September 14, 2016 at 13:53
  
  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
  1. Rafael Trevisan says:
    
    September 16, 2016 at 19:47
    
    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
    1. Rafael Trevisan says:
      
      September 16, 2016 at 20:29
      
      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
  2. Nick Buytaert says:
    
    September 21, 2016 at 10:19
    
    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
    1. Rafael Trevisan says:
      
      September 27, 2016 at 18:08
      
      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
2. Nick Buytaert says:
  
  September 28, 2016 at 12:51
  
  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
Jun Naling says:

September 23, 2016 at 23:06

hi Nick,

How can I set the desired tab in page B from another page A.

Thanks,
Alfredo

LikeLike
1. Nick Buytaert says:
  
  September 25, 2016 at 18:00
  
  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
  1. Jun Naling says:
    
    September 26, 2016 at 16:53
    
    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
    1. Jun Naling says:
      
      September 26, 2016 at 18:24
      
      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
Nick Buytaert says:

September 27, 2016 at 07:32

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
1. Jun Naling says:
  
  September 27, 2016 at 16:57
  
  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
Hemisha says:

November 5, 2016 at 11:07

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
1. Nick Buytaert says:
  
  November 6, 2016 at 10:29
  
  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
  1. Hemisha says:
    
    November 6, 2016 at 17:24
    
    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
    1. Nick Buytaert says:
      
      November 7, 2016 at 09:51
      
      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
Hemisha says:

November 21, 2016 at 15:56

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
1. Nick Buytaert says:
  
  November 25, 2016 at 09:16
  
  Did you add the classic report regions as sub regions and set their “Region Display Selector” setting to “No” ?
  
  LikeLike
  1. Hemisha says:
    
    November 29, 2016 at 16:08
    
    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
    1. Nick Buytaert says:
      
      December 7, 2016 at 09:46
      
      I have replied to your e-mail.
      
      LikeLike
kulthoomhendricks says:

November 29, 2016 at 16:44

Hey Nick,

I have the same problem, is it possible to have multiple display selectors on one page?

LikeLike
1. Nick Buytaert says:
  
  December 7, 2016 at 09:12
  
  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
franck1993 says:

March 28, 2017 at 10:23

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
1. Nick Buytaert says:
  
  April 4, 2017 at 07:40
  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”.
```
apex.jQuery("#subRgnNr2_tab a").trigger("click");
```
  So your button should have the action “Redirect to URL”, then enter the below code in the “Target” setting.
```
javascript:apex.jQuery("#subRgnNr2_tab a").trigger("click");
```
  Here’s a live example:
  https://apex.oracle.com/pls/apex/f?p=58006:140
  
  Hope this helps,
  Nick
  
  LikeLike
  1. franck1993 says:
    
    April 4, 2017 at 11:19
    
    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
    1. Nick Buytaert says:
      
      April 5, 2017 at 07:54
      
      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
    2. franck1993 says:
      
      April 5, 2017 at 09:11
      
      i am using Apex 5.0 !
      please write to me under this Email: thefaned@gmail.com (for Access)
      thank you for your help
      
      LikeLike
Stefanie says:

April 7, 2017 at 17:32

That’s exactly what I was looking for. Thanks!

LikeLike
astridthijsblog says:

May 2, 2017 at 19:07

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
1. Nick Buytaert says:
  
  May 3, 2017 at 08:19
  
  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
Nivetha says:

October 30, 2017 at 12:01

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
1. Nick Buytaert says:
  
  November 13, 2017 at 08:24
  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:
```
$(".apex-rds .apex-rds-item a").click(function() {
  apex.widget.waitPopup();
});
```
  More information on apex.widget.waitPopup();
  http://rimblas.com/blog/2015/08/enhancement-to-waitpopup-on-apex5/
  
  Nick
  
  LikeLike
Alex says:

November 27, 2017 at 10:34

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
1. Nick Buytaert says:
  
  November 29, 2017 at 19:23
  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:
```
apex.jQuery("#subRgnNr2_tab a").trigger("click");
```
  Good luck!
  Nick
  
  LikeLike

Comments are closed.

	Oracle APEX 系列文章10：O… on Chunked multi-file upload with…
	Badge List in Oracle… on Creating a badge list query in…
	APEX-poznámky… on Recover a deleted APEX page or…
	tienthanhpham on HTML5 camera integration in Or…
	Dirk on Version 3.0 of the Select2 APE…

APEXPLAINED

Ohh my… yet another silly word play on APEX

Working with Region Display Selectors in APEX 5.0

Declarative features

1. Mode

2. Include ‘Show All’

3. Remember Last Selection

“Hidden” features

1. Find out what tab has been clicked

2. Don’t jump to the top of the page after selection

46 thoughts on “Working with Region Display Selectors in APEX 5.0”

Declarative features

1. Mode

2. Include ‘Show All’

3. Remember Last Selection

“Hidden” features

1. Find out what tab has been clicked

2. Don’t jump to the top of the page after selection

Share this:

Related

46 thoughts on “Working with Region Display Selectors in APEX 5.0”