I have one page where i have about 8 tab region. Each region has a select statment. They are executed when accessing the page (page load) at the same time. Because i have 8 select statment that executes at same time it leads to pure performance. My question is how to execute the query only on active region.
-
How are you created tabbed regions? I have used APEX 5.0 a bit, not a lot, but can't see any native way of creating tabbed regions. – Tony Andrews Aug 09 '16 at 09:17
-
@TonyAndrews You add region and set type to be "region display selector" than add new region inside first region and set option region display selector to be true. Can you help me with this question? – Aug 09 '16 at 09:22
-
Not much! First of all, do you know of a way using a dynamic action to determine which tab has been clicked? I just tried but didn't succeed. If you can do that you can probably get somewhere. – Tony Andrews Aug 09 '16 at 13:27
2 Answers
You can try this one
- Create Dynamic Action on event "Page Load"
- Create true action "Execute javaScript Code":
window.setTimeout(function(){ $('.a-Region-carouselLink').click(function(){ apex.event.trigger(document, 'tabChanged', this); }) }, 500);
Set "Fire On Page Load" to "Yes"
Create Custom event "tabChanged"
Create true action in DA custom event "Execute JavaScript Code":
console.log(this.data);
Test it - each time you click the tab, DA prints to console currently clicked anchor.
Of course it is not perfect because of the 0.5s delay. Still it allows you to listen what tab was "clicked".
To make your scenario work I would do:
- create page item
PX_TAB
- create true action in custom event to set value of
PX_TAB
- create true actions in custom event to refresh reports within tabs
- set "Page Items to Submit" to "
PX_TAB
" in each report to be refreshed - add condition to each report comparing value of item
PX_TAB
- it will execute SQL query only whenPX_TAB
has expected value
edit 2016.08.13
You can bind tabs by simple adding listener to the tabs
$(document).on('mousedown', 'a.t-Tabs-link', function(){
//this is an anchor used as tab
console.log(this)
})
If you want to keep it in APEX way enter code from below in Execute when Page Loads
page section or create new dynamic action On page load
$(document).on('mousedown', 'a.t-Tabs-link', function(){
apex.event.trigger(document,'tabChanged', this);
})
and then add dynamic action bound to Custom event
named tabChanged
. Whenever tab is clicked the tabChanged event is triggered, and in Execute JavaScript Code
you can reference current tab by this.data

- 1
- 1

- 81
- 4
-
the second part i have done and PX_TAB get value on page load. I need to set PX_TAB when i click the tab page. – Aug 10 '16 at 11:40
-
Do it within `tabChanged` custom event. It's not a big deal. The scenario I've described is just general idea how to listen click event on Apex tabs with 2 simple dynamic actions. I've pointed `this.data`, so you can inspect it yourself. `this.data` points DOM anchor element that was clicked. You can use anchor text for item value. – bostrowski Aug 10 '16 at 11:52
-
Create true action "Execute javaScript Code": From this what is Affected Elements? – Aug 10 '16 at 12:01
-
does not matter. The true action is executed on Page load and binds tabs anchors witch click event after 0,5s. Clicking the tab triggers custom event tabChanged with anchor referenced as `this.data` in Execute JavaScript Code. Its really not a big deal to replace `console.log` with `$('#PX_TAB').val( $(this.data).text() ).trigger('change')` – bostrowski Aug 10 '16 at 12:06
-
Try to create buttons and set behavior of each button to display required region and hide others (create hidden item, then create buttons that set values 1,2,3 etc., then add conditions to every region to display region 1 only when hidden item equal 1, region 2 for item value 2 etc.

- 43
- 5