JMJ CLOUD
  • Home
  • Projects
  • Blog
  • About Us
  • Contact Us

Our Blog

Oracle APEX Instant Modal

1/1/2017

2 Comments

 

Introduction

Picture
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.
Picture

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. 
2 Comments
Scott link
1/6/2017 02:49:15 am

Thanks for posting this framework. I've just re-purposed the concept, but you saved me the fiddly bits. Cheers!

Reply
Jonathan Dixon link
1/6/2017 06:17:54 am

No worries.

Reply

Your comment will be posted after it is approved.


Leave a Reply.

    RSS Feed

    Popular Posts

    - APEX Dog Food
    - Cloud ERP & APEX Mashup
    - Modernizing EBS with APEX
    - Easy APEX_WEB_SERVICE
    - Running APEX in RDS
    - ORDS What & Why?

    Categories

    All
    APEX
    AWS
    Fusion Cloud ERP
    INTEGRATION
    OCI
    ORDS
    PaaS
    RAD
    REST
    SOAP

    Archives

    January 2021
    October 2020
    September 2020
    June 2020
    May 2020
    April 2020
    February 2020
    January 2020
    October 2019
    September 2019
    August 2019
    July 2019
    June 2019
    April 2019
    March 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    July 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    September 2017
    August 2017
    July 2017
    June 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016

Company

About
Contact
Blog
  • Home
  • Projects
  • Blog
  • About Us
  • Contact Us