How do I Create pop up modal pages

 

Introduction
Creating pop-up modal pages in Oracle APEX is an effective way to display additional information, forms, or interactive content without navigating away from the current page. Modal dialogs improve user experience by keeping context intact and allowing users to complete tasks quickly within a focused interface. Understanding how to build and configure modal pages is essential for designing modern, responsive APEX applications.

In Oracle APEX, creating pop-up modal pages allows you to display content such as forms, reports, or messages in a dialog window that overlays the current page. This approach keeps users focused by preventing full page reloads and maintaining context. Modal pages are widely used for quick data entry, confirmations, or detailed views without navigating away from the main interface.

Here is a detailed guide on how to create pop-up modal pages in Oracle APEX:

Step 1: Create a New Page of Type Modal Dialog

• In your APEX application, go to the App Builder and create a new page.

• Choose Modal Dialog as the page type.

• This page will automatically have a modal dialog template and layout optimized for pop-ups.

• Configure the page attributes like title and breadcrumbs as needed.

Step 2: Design the Modal Page Content

• Add the necessary page items (e.g., form fields, buttons) or regions (e.g., reports) to the modal dialog page.

• Keep the content concise since modals are best for focused tasks.

• Design validation and processing logic just like for any standard page.

Step 3: Configure Modal Page Settings

• In the modal page properties, set the Dialog Width and Dialog Height to control the size of the pop-up.

• You can specify pixel values or percentages.

• Optionally configure the Dialog Title Bar and buttons like Close or Cancel.

Step 4: Create a Button or Link to Open the Modal

• On the calling (parent) page, add a button or a link to open the modal dialog.

• Set the button or link’s action to Redirect to Page in Modal Dialog.

• Specify the modal page number you created.

• Optionally pass any required parameters via page items or request values.

Step 5: Passing Data Between Pages (Optional)

• Use page items to pass values from the parent page to the modal page via Set Items in the modal dialog link or button.

• Similarly, the modal page can pass values back to the parent page using page items and JavaScript events after submission.

Step 6: Handle Modal Page Processing and Close Behavior

• Define processing logic (such as inserting or updating data) in the modal page as usual.

• After processing, configure the modal page to close and optionally refresh the parent page or specific regions using dynamic actions.

• Use Dialog Closed dynamic actions on the parent page to react to modal dialog closing (e.g., refresh reports or display messages).

Step 7: Test the Modal Dialog

• Run your application.

• Click the button or link to open the modal page.

• Verify the modal content loads correctly.

• Complete any actions in the modal and confirm it closes and updates the parent page as expected.

Additional Tips

• Use modals for short, focused interactions to avoid overwhelming users.

• Keep modal dialogs responsive and avoid overly large content.

• Take advantage of APEX’s built-in modal dialog templates for consistent styling.

• Use Dynamic Actions and JavaScript to enhance modal behavior when needed.

Creating pop-up modal pages in Oracle APEX enhances your applications by enabling focused, efficient user interactions without losing context. By following best practices to design, open, and manage modal dialogs, you can build modern, user-friendly interfaces that streamline workflows and improve overall usability. Mastery of modal pages is a valuable skill for any Oracle APEX developer aiming to deliver polished and professional applications.

 

Creating Popup Modal Pages in Oracle APEX

A popup modal page in Oracle APEX is a great way to display additional content without navigating away from the current page. Modal dialogs can be used for data entry forms, confirmation messages, reports, or any interactive content.

This tutorial explains how to create and use modal popup pages effectively in APEX, including configuring attributes, opening them with buttons, passing values, and closing them dynamically.

Step 1: Creating a Modal Page

1. Go to Shared Components and create a new Popup Modal Page or create a new standard page and later configure it as a modal.

2. When prompted for a page type, choose Modal Dialog.

3. Set the Dialog Width and Height to define how large the modal will be. APEX allows fixed dimensions or responsive percentages.

4. Under Navigation, make sure the page is Dialog Mode: Modal Dialog.

5. Click Next and follow the standard APEX page creation process.

Step 2: Adding Content to the Modal Page

Once the modal page is created, add the content you need:

• Use Interactive Grids or Classic Reports to display data inside the modal.

• Add Form Items such as text fields, dropdowns, and buttons to allow user interaction.

• Use Region Titles and icons to improve readability.

Step 3: Opening the Modal with a Button or Link

To open the modal page, a button or link should be configured.

Option 1: Using a Button

1. Go to the Main Page where the button should be placed.

2. Add a Button and set its Action to Redirect to Page in Modal Dialog.

3. Enter the Target Page Number (the modal page created in Step 1).

4. If you need to pass values to the modal, use the Set Items property to send data.

Option 2: Using a Link

If opening the modal from a report or any hyperlink, use the Link Column in Classic or Interactive Reports.

• Set the Target as Redirect to Page in Modal Dialog.

• Assign Item Values from the row to be displayed inside the modal.

Step 4: Passing Values to the Modal Page

When opening a modal, it's common to pass values like an ID to fetch specific data.

1. Under Set Items, select the item on the modal page.

2. Use a corresponding Source Item from the calling page.

3. The modal page will now receive this value and use it in SQL queries.

Example SQL Query inside the modal:

SELECT * FROM EMPLOYEES WHERE EMPLOYEE_ID = :P10_EMPLOYEE_ID;

This will load employee details inside the modal based on the selected record.

Step 5: Closing the Modal and Refreshing the Parent Page

A modal should close after completing an action, such as saving a form.

Option 1: Using a Close Dialog Process

1. Inside the modal page, create a Submit Button (e.g., "Save").

2. In the Processing Section, create a PL/SQL Process to save the data.

3. Add a Close Dialog Process after the save action to close the modal automatically.

Option 2: Using JavaScript

Use this JavaScript code inside a Dynamic Action on a button to close the modal manually:

apex.navigation.dialog.close();

If refreshing the parent page is needed, use:

apex.navigation.dialog.close(true);

Step 6: Refreshing the Parent Page After Modal is Closed

If a modal updates data, refresh the main page when it closes.

1. Go to the Main Page where the modal opens.

2. Create a Dynamic Action on Dialog Closed.

3. Set the True Action to Refresh and select the relevant Report or Region to refresh.

This ensures that new or updated data appears without needing a full page reload.

Best Practices

• Keep modal sizes appropriate. Don't make modals too large—stick to essential content.

• Pass only necessary values to reduce complexity and avoid performance issues.

• Ensure modals close properly after actions to improve user experience.

• Refresh data on the parent page after a modal updates information.

• Use dialog headers and buttons for better usability.

Popup modals in APEX are an excellent way to improve interactivity without navigating away from the main page.

 By configuring modal pages correctly, passing values, and ensuring they close and refresh efficiently, you can 

enhance the user experience and create seamless workflows.

EXAMPLE:

Step 1: Add button and create a modal page…in this case our test modal page is page 9

Step 2:  Set behavior and target

Set Target:

Result :

Conclusion
Mastering the creation of pop-up modal pages in Oracle APEX enables developers to build seamless and intuitive applications that enhance user workflows. By leveraging modal dialogs, you can present important content in a clear, focused manner while maintaining the overall application context. Implementing modal pages effectively helps create polished and user-friendly interfaces that improve productivity and engagement.