Refresh a region on change of tabs in Region Display Selector in Oracle APEX

-


Region Display Selector is a Region component that provides a page level navigation control for other regions on the with the Region Display Selector property set to Yes. It can be configured to work in two modes:

  • View Single Region Show regions as tabs. Selecting a tab will make the corresponding region visible and hide the other selections.
  • Scroll Window Always display all the regions on the page. Selecting a tab will scroll your window to the corresponding region.

Follow the instructions below to add a Region Display Selector to your own pages:

1) Create a Region Display Selector region and place it in the Breadcrumb region position on your page.

2) Modify the other regions on the page and set the Region Display Selector property to Yes for the regions that you want to appear in the Region Display Selector.

3) Provide a static ID to the region which that has to be refreshed on change of a tab. In this example it is "RDS_EMP".

5) Paste the below code in the Function and Global variable Declaration section in the page.

For Refreshing a Single Region

$('.apex-rds').data('onRegionChange', function(mode,activeTab) { 

          if ((activeTab.href === "#RDS_EMP")){ 

             apex.region(activeTab.href.replace("#","")).refresh(); 

          } 
   });

For Refreshing Multiple Regions 

Please use my plug-in Refresh Region Display Selector Regions


Click here for DEMO

HAPPY CODING!!! 
Thank you :)

Comments

Post a Comment

Popular posts from this blog

Allow Only Number/Decimal values In a Number/Text Field Using JavaScript in Oracle APEX

-
Image
In this blog I will be explaining how to restrict users from typing only numbers/decimal values in a Number/Text Item in Oracle APEX. 1) Create a Region .    2) Create an Item in the page (Type: Text Field or Number Field ). 3) To allow only Numbers, paste the below code in the Page ->  Execute When Page Loads Section . $("#P30_NUMBER_FIELD_ITEM").keypress(function(event){ event = (event) ? event : window.event; var charCode = (event.which) ? event.which : event.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; });   Note: Replace P30_NUMBER_FIELD_ITEM with your Item name. 4) To allow only Decimal values, paste the below code in the  Page  ->  Execute When Page Loads Section . $("#P30_DECIMAL_FIELD_ITEM").keypress(function(event){ event = (event) ? event : window.event; if ( event.which != 0 && (event.which < 48 || event.which > 57) &am
Read more

Display and Edit CLOB Content in Oracle APEX

-
Image
In this post I will be explaining how to display  and edit a CLOB content in Oracle APEX.  Please follow the below steps: 1) Create a table T_EMPLOYEE CREATE TABLE T_EMPLOYEE ( EMP_ID NUMBER, EMP_NAME VARCHAR2(100), DESCRIPTION CLOB ); 2) Insert the required data into the T_EMPLOYEE table.                           3) Create a page in the application.  (In this example Page - 5) 4) Create another page with the Page Mode as Modal Dialog (In this example Page - 6)   5) Create a region and two items in Page - 6. The Items are:     P6_EMP_ID -> Type -> Hidden  (Value Protected: No)     P6_EMP_DESCRIPTION ->   Type  ->  Text Area   (or) Rich Text Editor 6) Now navigate back to Page - 5 and create a Region ( Type -> Interactive Report ) 7) Paste the below code in the Source -> SQL Query of the Interactive Report SELECT EMP_ID, EMP_NAME, 'Preview' as "PREVIEW" FROM T_EMPLOYEE; 8) Go to the PREVIW column
Read more

Copy the value of an Item to Clipboard in Oracle APEX

-
APEX does not provide an inbuilt functionality to copy the value of a page item to clipboard . Use my plug-in Copy To Clipboard to achieve or if it has to be achieved via code p lease follow the below steps :- For visible Items: 1) Create an  Item in the APEX page. (In this example the Item is P1_ITEM) 2) Create a button. (In this example the button is P1_COPY) 3) Create a Dynamic action          Event:  Click         Selection Type:  Button         Button:  P1_COPY 4) Create a True Action      Action:  Execute JavaScript Code      Paste the below code:        /*to select the text field*/ $("#P1_ITEM").select(); /*to copy the text inside the text field*/ document.execCommand("copy"); /*to show success message (Optional)*/ apex.message.showPageSuccess('Copied to Clipboard!'); For hidden Items: Step 1,2 and 3 is similar 4) Create a True Action      Action:  Execute JavaScript Code      Paste the below code:        /*
Read more