Creating a Modal Dialog in APEX 5.0

Modal dialogs are a useful feature for all kinds of APEX applications and with the release of APEX 5, they are supported natively. You can easily implement one as part of a “Form and Report” built with the wizard, but in this blog we’ll look at creating one from scratch.

I started by creating a simple page that allows me to select an employee and have their details populated on the screen. I also included an edit button which will eventually call our modal dialog page.

Next I created a new page with the page mode set to “modal dialog”. This page contains the same fields as the main employee screen, but the employee ID item is hidden and the rest of the fields are editable.

To display the modal page, all we have to do is set the edit button to redirect to it!

Clicking the edit button will now open up our modal page and disable the source page. In this example I will change the surname “Connell” to “OConnell”.

To save the edited employee details we just need to set the “Save” button to submit the page and then include a PL/SQL process to save the employee details and then create a separate “Close Dialog” process to fire afterwards. This will close the modal dialog and re-enable the source page once the details have been saved.

The “X” close button is included by default and will close the dialog without firing a “Close Dialog” event, allowing a user to cancel any changes they have made.

Finally, we want to refresh the details on the source page when the dialog is closed. To achieve this we just need to create a ‘Dialog Closed’ dynamic action on our “Employees” page. The selection type should be the item that originally opened the modal dialog, so in this case the edit button. A “Submit Page” true action is also needed to complete the dynamic action.

Now we can open the edit dialog, change some details and when we press “Save”, the dialog is closed and the Employee page is submitted, refreshing the data on the page.

This is a welcome addition to APEX that will make it so much easier to create and re-use custom modal dialogs.

Author: Craig Sykes 

Job Title: Senior Oracle Development Consultant

Bio: Craig is a Senior Development Consultant at DSP-Explorer. Craig has an MSc in Computing Science and is an experienced software engineer, utilising development tools such as PL/SQL and APEX to provide bespoke ERP software to both UK and international businesses. Craig has experience developing solutions to connect Oracle systems to a wide range of existing external applications within business environments.