Modal Pop-Ups in APEX 5.0

Introduction to Oracle APEX 5 – New Features


Lesson 6 – Modal Page


>> Tyson:  Let’s go ahead and we’re going to look at some interactions between pages that I think are really cool. I’m sure you have created a form and report, a reform on table with report and this interaction should be familiar to you as APEX developers.


I click the edit link and I go to the detail page. I click “Cancel” and I go back.


One thing that APEX 5 added that is really awesome is you can very easily make a page modal. If you’re not familiar with the modal is, basically that’s just a popup that comes to the front of the screen.


What I’m going to do is I’m going to navigate to this detail page. I want this page to be a modal. So what I’m going to do is I’m going to edit page 3. Notice it sent me back to this tab here and it updated the tab to be on page 3.




I just want to point out, over here on the right-hand side, if you’re using the page designer, which that’s what this is, whenever you click on something, you’re going to have property show up on the right-hand side. So if I click on the employee details regions, I’m going to have properties on the right-hand side for that region. If I click on the P3_ENAME item, I’m going to have properties for the P3_ENAME item on the right-hand side.


So at the very top is the page itself. That’s kind of a latch to get the page context. And you’ll see here there’s something called page mode. Quite simply I can change this to modal dialogue.




Save. Now what I’m going to do is I’m actually going to navigate to page 2 which should be my report.




I’m going to click “Run.” Then now when I click “Edit” on KING, the form now pops up in a modal. I changed one property on one page and it modified the link to that page and it changed the details of the target page. So it knows it needs to render in a modal view. How cool is that?


I’m also going to take a second here – and this is really cool. I’m going to make it cancel and I’m going to talk about this real quick. The developer toolbar down at the bottom has a context of editing page 2. So it says, “Edit page 2.” I’m going to click this link so there’s a modal popup powered by APEX and now it says, “Edit page 3.” So it’s actually going to edit this popup which is what I would like to edit.


That’s a major improvement that the SkillBuilders modal could never do. This is a really clean, awesome way to get to editing this popup. I click “Edit” and now I’m editing the modal popup page.


Copyright 2017

Free Online Registration Required

The tutorial session you want to view requires your registering with us.

It’s fast and easy, and totally FREE.

And best of all, once you are registered, you’ll also have access to all the other 100’s of FREE Video Tutorials we offer!