Regional Display Selector Freezing In Oracle Apex
The Region Display Selector is a Region component that provides page-level navigation control for other regions with the Region Display Selector property set to Yes. It can be configured to work in two modes:
- View Single RegionShow regions as tabs. Selecting a tab will make the corresponding region visible and hide the other selections.
- Scroll WindowAlways display all the regions on the page. Selecting a tab will scroll your window to the corresponding region.
Technologies and Tools Used
The following technologies have been used to achieve the expected output.
- JavaScript
- CSS
Use Case
Since the regional display selector help to Navigate from Region to the region with view single region display and Scroll Window display. In both the methods we can not view the title of the region when we scroll down to the region. Using JavaScript and CSS we can perform this function. Below is the use case of the Region Display Selector.
We can freeze the Region items, Buttons, and Region Display Selector Region at the top when we Scroll down to the bottom.
This document explains how to achieve this requirement.
Architecture
The following steps explain in detail,
Step 1:
Create Two or more Region then change the first region type into a regional display selector. After that add the other regions into the region display selector by changing ‘Yes’ in the Regional Display Selector option in the region level setting(Advance).
Step 2:
Create another region with a static region type. Change the sequence to 1.Create the button(Cancel, Create, Delete, Apply Changes ) and Item(item which needs to display on all tabs) in this region.
Step 3:
Add static id ‘TEST’ into the static region. Which is created in step 2.
Step 4:
Add the below code into the JavaScript on page load.
window.setTimeout(function(){
$(‘#TEST’).stickyWidget({toggleWidth: true})&&$(‘ul.a-Region-carouselNav.a-Tabs.t-Tabs.t-Tabs–simple li a’).stickyWidget({toggleWidth: true});
}, 500);
Use this code in Apex 20.
window.setTimeout(function(){
$(‘#TEST’).stickyWidget({toggleWidth: true})&&$(‘ul.apex-rds.a-Tabs li a’).stickyWidget({toggleWidth: true});
}, 500);
If You want to Change the color use the Below step.
Step 5:
Add below code in Inline CSS,
.t-Region-body{
background-color: #e7e7e7 !important;
}
ScreenShot
Output:
By using JavaScript as mentioned above we can freeze and color the region display selector in oracle apex.
