Although there is already some good documentation, and even a recorded webinar on the Skillbuilders Modal Page plug-in, I decided to create a step-by step reference, that will dive a little deeper into some of the details of using this plug-in. Before I begin, however, I need to thank Dan McGhan for this wonderful plug-in, and the help he’s provided, and to Jorge Rimblas, who had some great ideas on its usage, and helped me troubleshoot some issues.
Here is a sample screenshot of my demo application, where I created a classic report on the EMP table, and a modal page based on a form, also on the EMP table:
In this example, we will create a report page (page 2) on the EMP table, and a detail page (page 3), also on EMP. From the report page we will be able navigate to the detail page, having the detail render in the Modal Page.
- The Skillbuilders Modal Page (2.0.0) Plug-in installed in the application.
- Make sure the Plug-in has a theme selected (Shared Components -> Component Settings -> Click the plug-in link. Under Settings select a theme other than Custom.)
- Report page (page 2) with a classic report on EMP.
- A region button labeled “Create” inside the report region. This button’s action will be based on a Dynamic Action, which we will define later.
- Detail page (page 3), with a form based on EMP.
- The application needs to be set to allow iFrames (Shared Components -> Security Attributes: Under Browser Security select one of the Allow options for the Embed in Frames attribute.
Configuring the Detail (modal) page:
For the best look & feel, chose the Popup page template, to make sure we don’t get any unnecessary items on the page.
Make sure the detail page branches to itself (page 3 in my case).
Optional: Create a page process based on PL/SQL to force a success message even when no changes have been made to the data:
Make this process conditional, so that it only executes when the page didn’t generate a success message:
Later, we will need to check for the existence of a success message on the modal page. For this, make a note of the class or ID for the success message in the page template:
Edit the page, and double-click the page template in the Shared Components section:
In the Subtemplate Section of the Edit Template page, find the ID for the #SUCCESS_MESSAGE# section (in my case uSuccessMessage). This is the part of the page where the success message is displayed. Make a note of this ID.
Configuring the Report Page
The report page will have two places from which to call the modal page:
- A Create button to create new employee records.
- A link column in the report to edit employee records.
It will also have a dynamic action to handle what happens when the modal page closes.
The Create Button
- Create a region button based on a Dynamic Action in the report region.
- Create a dynamic action on this button to fire when the button is clicked.
- Add a True action for the Skillbuilders Modal Page plugin.
- Use the following settings (substitute the correct page number for your detail page, and the name of the class of the Success Message section of the detail page from above)
- Apply the changes.
Now when you run the page and click the Create, the detail page should pop up as a modal window. However, when you create a record had save it. The modal page won’t go away. To fix this we need to add a Dynamic Action to handle the Auto-Close event of the modal page.
The Cancel Button
Set the Action of this button to “Redirect to URL”. For the URL Target use:
Auto-Close Dynamic Action
On the report page, create a dynamic action that fires on the event Auto Close [Skillbuilders Modal Page (2.0.0)], and use the following settings:
&& this.data.modalPageId =='editCustomer'
The modalPageId needs to be the same value as that in the modal page ID of the modal page dynamic action.
Add two true actions:
- An action to refresh the report region when the modal page is closed, so we can see the changes we’ve made right away:
Note the code section. It says to operate on the DOM object with the ID of mySuccessMessage. First it hides it, then it replaces its HTML content with the success message from the modal page (this is a built-in jQuery selector $modalPageCloseObject), and then makes the message reappear.
To find the right value of the DOM object on the report page, we need to edit the page template of the report page, like we did for the detail page. There we need to locate the element for the #SUCCESS_MESSAGE#. This time, however, we need to find it in the Body section of the page template definition:
In my case, the template did not have the #SUCCESS_MESSAGE# surrounded with a tag. So I surrounded it with a tag and gave it the ID value mySuccessMessage.
This all may vary from template to template. But you should be able to find the #SUCCESS_MESSAGE# in the built in APEX templates.
Now, when a button on the detail page is clicked, the modal window should close and the report should get refreshed.
Configure the Column Link in the report
In order to open the modal page from a edit link in a report row, we need to edit the column link’s with the following Link Attributes. This causes the link not to go any where, and we use the class ID as an identifier for another dynamic action. Also make sure you pass on the EMPNO to the detail page.
Now we create a dynamic action of type Skillbuilders Modal Page Plugin, that fires on click of jQuery selector a.edit-link (all anchors with class edit-link). This happens when the column link in the report is clicked.
Make sure to select Dynamic in the event scope, or else the column link won’t work after the modal page is closed, and you have to reload the page.
Make sure the Event Scope is Dynamic:
The URL location is now set to an attribute of the triggering element: href
Make sure all your changes have been applied. Now you should be able to open the modal detail page from either the Create button, or from the column links in the report. Once changes have been made, the success message should appear at the top of the report page.