Monday, July 4, 2016

Oracle Apex 5 Modal Window with Universal Theme

     Some people use modal pages to create modal windows, but in some cases it is recommended to use the modal region for it. This solution will take advantage of some of the features found in the APEX 5 Universal theme because it is easier to Develop and debug.

1. Create a new region and than set this template to inline dialog. On my test i named it to Dialog Region.

blog_1.png

2. On my example the modal will be open by a button click, so we need to create a button on another region.
3. Create a dynamic action which fires on button click and point to the created button.
4. Create a true action with the Execute JavaScript Code action and use the following for the code property. Don't forget to set the Fire On Page Load to No.

  this.affectedElements.dialog('open'); 

blog2.png

5. Now you have to create a button to close the modal. Create it on the modal region and do the same as above but now with the following code.
  this.affectedElements.dialog('close'); 


6. Refresh the page and test it.

No comments:

Post a Comment