Oracle APEX Instant Modal

Introduction

There are several methods for displaying additional information on an APEX 5 page. These include an in-line modal dialog (in the same page), a modal dialog page (in a separate page) and of course mouse over events with custom JS and CSS. In this post, I am going to cover the in-line modal dialog with a speedy twist.


We often need to display additional information for a record in a report. If users only infrequently access the additional information, then a modal dialogue page is the way to go. It allows greater re-use and keeps your main report page cleaner.

If, however, your users need to access that additional information frequently the separate page modal is a little slower. APEX must make an additional round trip to the database to load the modal page and run the associated SQL.

Using an in-line modal dialog provides some benefit as the region is loaded with your report page. There is still some overhead, however, in running the SQL to fetch the additional information.

The best of all worlds would be to have the additional information fetched during the report page load and pass that data to the in-line dialogue to display. No extra page load and no extra round trip to the database.

---

The Finished Product

I have a page with just two regions containing a Classic Report region and a Inline Dialog region. The report queries all_tables and the in-line dialog shows additional information for a table when the user clicks on the table name. Here is a look at the finished product with the popup.

Demo Page Structure

Region - DB Tables (Type: Classic Report, Template: Standard)
To deliver the detailed information for the modal instantly, we must get the information during the main report query. I am doing this by adding a column which builds some JSON for each row which contains the additional information.

The 'table_name' column is defined in the report as follows:
​Link Text:
<span class="t-Button t-Button--small t-Button--simple t-Button--stretch t-Icon">#TABLE_NAME#</span>
Link Attributes:
class="xxClickPopupClass" data-id="#TABLE_NAME#" data-jsonString="#POPUP_DATA#"

• xxClickPopupClass is the class we are going to use to trigger our Dynamic Action on Click
• data-jsonString is going to contain our Jason data with the additional details

The column 'POPUP_DATA' should be Hidden.

Region - Record Detail (Type: Static Content, Template: Inline Dialog)
This region is the modal that will show the additional details when the user clicks on a table.
Static ID:
recordDetailModal
Text:
<div id="popupContent"></div>

• popupContent is the DIV we will replace with the detail content for the table clicked by the user.

​
Dynamic Action
Now we have the structure in place, it's time to bring the modal to life. The dynamic action should be triggered on Click using the class xxClickPopupClass to trigger the action. The use of the Static Container is to limit the scope of the ​xxClickPopupClass.

The Javascript for the Dynamic action is below, hopefully it is pretty self explanatory. I have tried to keep the code generic in order to make it re-usable.

Styling
I have re-used classes from the Classic Report Template Option 'Value Attribute Pairs - Column' to format the dialog data. The javascript above is dynamically building HTML that looks like the HTML below.

Conclusion

This is not overly complex as APEX goes, but it does illustrate that with a little thought you can improve your end users experience without too much additional effort. Of course, there is some overhead in fetching the additional JSON column when the user may never view it. As with all things you need to weigh this with your specific use case. Having said that, a fraction of a second saved frequently adds up when measured across many users.