Display Inline Popup as Callout in Oracle APEX

-

In this blog I will be explaining, how to display an Inline Popup as a callout.

Follow the below steps to achieve this:

1) Create a Region 

2) Create a Button in the region, provide a static ID to the button (Advanced -> Static ID)

     

 

3) Create another Region  and select the below properties for the region.

  • Layout -> Position -> Inline Dialogs (Optional)
  • Appearance -> Template -> Inline Popup
4) Click on the Template Options (Appearance -> Template Options) of the region.


The below mentioned points are mandatory: 
  • Check the Display Popup Callout checkbox. 
  • Choose a Callout Position from the list.
All the other options can be chosen based on the requirement.

5) Paste the below piece of code in the Advanced -> Custom Attributes section of the region. 
     

data-parent-element="#YOUR_STATIC_ID"

  • In the above piece of code, replace YOUR_STATIC_ID with the static ID that has been provided for the button.  
  • The Popup Callout is NOT restricted only for buttons.
  • ID of  Regions or Items etc.. can be provided instead of YOUR_STATIC_ID to show the callout.
6) Create an On Click Dynamic Action for the button. 

7) Create a True Action (Action -> Open Region). Select the Inline Popup region that has been created in step 3.


Please visit the demo page to see some example callouts.


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