Sunday, September 11, 2016

Using inline dialogs in APEX 5

APEX 5 has built-in support for dialog boxes. These come in two varieties; dialog pages (which show another standard APEX page in a dialog box using an iframe) and inline dialogs (which show a region on the current page as a dialog box). John Snyders goes into great technical detail about APEX dialogs and the differences between the two types.

This post is a quick summary of how to use inline dialogs. As John points out, you should consider inline dialogs if the content is mainly static, don't need validation or submit processing, and must display quickly.


Start by adding a region to the "Inline Dialogs" display position, and set the template to "Inline Dialog". Set the static id of the region to "my_inline_dialog".


When the page is rendered, the region in the "Inline Dialogs" display position will be initially hidden. To display the dialog, create a button and define a dynamic action on it to execute the following Javascript code:

openModal('my_inline_dialog');


As shown below:



Add a close button to the inline dialog region and create a corresponding dynamic action on it to trigger the following Javascript code:

closeModal();

As shown below:



By the way, these Javascript functions are just short helper functions that are included in the Universal Theme (theme 42), wrappers for jQuery functions:



When you run the page the dialog region is invisible:



When you click on the show button, the dialog appears:


This is a simple example, but remember that you can put anything in the dialog region (reports, charts, lists, PL/SQL dynamic regions, etc), including sub regions. Also remember that whatever content you put in this region will be loaded when the page loads, it will just be hidden until the dialog is displayed. If you need to refresh the content of the dialog, you can use a report region with a dynamic action refresh. To refresh PL/SQL dynamic content, consider using my dynamic action plugin.


Further references on APEX inline dialogs:

1 comment:

PhyllisB said...

How did you create a section called Region Buttons under Regions/Content Body/Region 1? I tried moving a button (in the middle section)
into Grid Layout, but my screen doesn't look like yours. My button appears under Buttons (same level as Regions).