How do I Create pop up modal pages

 Introduction

In Oracle APEX, creating pop-up modal pages enhances the user experience by allowing developers to display forms, reports, or other content in a focused, overlay window without navigating away from the current page. This is particularly useful for editing records, confirming actions, or presenting additional details. Modal dialogs help streamline interaction flow and keep the main page context intact, reducing page reloads and improving responsiveness. APEX provides built-in support for modal dialogs, making them easy to configure and integrate into your application with minimal effort.

In Oracle APEX, creating popup modal pages allows you to display pages in a focused overlay dialog without navigating away from the current page. These modal dialogs are particularly useful for editing records, viewing details, adding new data, or presenting confirmation messages. Oracle APEX supports modal pages natively through the Page Mode property.

To create a modal popup page, begin by navigating to the App Builder and opening your application. Click on “Create Page.” From the page types, select “Modal Dialog.” Then choose what kind of content this modal will show — for example, a Form, Report, or Blank Page. After selecting the content type, select the table or data source if applicable. Follow the page wizard steps to define the layout, fields, and processing.

Once your modal page is created, the next step is to link to it from another page, usually using a button or column link in a report. In the source page (the calling page), edit the button or link you want to use to open the modal. Set the action to “Redirect to Page in this Application” and choose the modal page number. Then, under the “Target” section, set the page mode to “Modal Dialog.” This will ensure that the page opens as a popup dialog rather than navigating to it directly.

You can also pass values to the modal page by adding items in the “Set Items” section of the link. For example, if your modal page edits an employee record, you can pass EMPLOYEE_ID into a form item. On the modal page, use page items to receive and process this data.

To close the modal dialog and return to the parent page, use a standard “Close Dialog” process. This is usually added automatically when using the page wizard. You can also add a Dynamic Action on a button to trigger the “Dialog Close” action manually.

For advanced behavior, such as refreshing the parent page or report when the modal closes, use the “Dialog Closed” dynamic action on the calling page. Set it to refresh specific regions like reports, charts, or forms, ensuring your interface reflects the most recent data.

Modal pages can also be styled with template options, and you can control their size, scrolling, and behavior through properties in the Page Designer. For example, under “Dialog,” you can configure width, height, and modal settings.

Modal pages help streamline workflow, minimize full-page navigation, and create a more professional and responsive user experience in your APEX 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

Using modal pages in Oracle APEX is a powerful way to build interactive and user-friendly applications. Whether you are creating a simple form for quick edits or a detailed report that needs to appear in a focused view, modal dialogs offer a clean and efficient solution. By leveraging APEX's native dialog features, developers can maintain design consistency, simplify navigation, and provide a better user interface experience throughout the application.