Skillbuilders Modal Page Instructions
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.
Pre-requisites:
- 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:
javascript:parent.$(parent.document).apex_modal_page('close');
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:
Note: When using multiple modal windows, you need to make this action conditional, so that it fires on close of a specific window. To do this, set the Condition to JavaScript Expression and use the following expression:
this.data
&& this.data.modalPageId
&& 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:
- A JavaScript true action that displays the success message from the detail page on our report page:
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 is the value I then used in the JavaScript code of the dynamic action.
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.
Seeing as how this is one of the most difficult plug-in out there, I’m sure your step-by-step reference will help many people.
In the next version I hope to simplify things just a bit by using two plug-ins: one to open the modal (dynamic action) and the other to close it (process). Thanks to Patrick Wolf at Kscope. Of course when the APEX team addresses modals this plug-in may become obsolete, only time will tell.
Regards,
Dan
Hi Christoph and Hi Dan,
When we do the Auto-Close action, is there a way to trigger that for a specific Modal Page?
For example, we have to Modal Page action for the Create and the Edit, but they are calling the same page. What if I want to trigger something different depending on which call was made? Like if I want to use the notification plugin and have a message of “Created Successfully ” and “Update Successfully”.
I’m aware there are many workaround for what I want to do, but I wanted to know if there’s something already there in the plug-in.
Thanks
Reginald, Insum.ca
Reginald,
sorry for the late reply. Do you mean you wish to trigger modal page A on Create, and modal page B on Edit?
I read what I said again and it was confusing indeed! But I found out what I wanted to do by looking at the documentation.
Basically, I wanted to make sure the Auto-Close action wouldn’t be executed for all my modal pages, but i just found out about the purpose of the modalPageId:
“The Modal Page ID setting is used to associate an identifier, such as “create-customer-page”, with the
modal page that has been opened. When the modal page closes, this identifier will be passed back with
the event object so that the closing of one modal page can be differentiated from another”
So that answers my question. Thank you for taking the time to reply.
Hi Christoph and Dan,
I use 2 different modal page in one page. I put a different id on each SkillBuilders Modal Page. My question is : how can I apply this condition when I autoclose my modal page?
Excellent question Ninon.
Create a dynamic action with the following (substitude modalPageID for the actual ID of your modal page).
DA
1st true action on autoclose:
Event: Autocose [SkilBuilders Modal Page (2.0.0)]
Selection Type: DOM Object
Condition: JavaScript Expresstion
Values: !(typeof this.data === “undefined”) && (this.data.modalPageId === “modalPageID”)
2nd true action to do whatever you want (refresh region, etc.)
Let me know if this works for you.
C
It works. Thank you! I have another problem.
In my autoclose action, I have 2 actions, the first action refresh my item and the second one set value to my item. It works fine in firefox, but not in IE9 :(.
Regards,
Ninon
Hi Christoph ,
To be more precise, if I put an alert between my action, it’s works, but when i use a setinterval or settimeout or dbms_lock.sleep, it doesn’t. (this always occur with IE9)
Regards,
Ninon
Pingback: Exit a Modal Window iframe in APEX | A little bit of everything
Thanks for adding the link, Jorge.
Hi,
I am trying to resize the modal window on open, it works fine in firefox but in IE the contents of modal page is not resizing according to the contents.
Can you explain how to achieve this?
Thanks,
Monica
Monica,
which version of IE? Can you please send me the modal window settings?
C
Question on resizing modal windows. When we have a modal window open, and in that window we allow the users to save and continue to have the window open, the window is increasing in size. It’s almost like it is padding the window with the existing size of the window..
Do you know of a way to have it STOP doing this?
Thank you,
Tony Miller
LuvMuffin Software
Ruckersville, VA
Tony,
unfortunately (or fortunately) I haven’t experienced that. I can only guess that there is a CSS issue.
Christoph
Do you think Skillbuilders will offer any support in this situation, or should we just wait until APEX 5, for better built-in support of Modal pages?
Thank you,
Tony Miller
LuvMuffin Software
Ruckersville, VA
I wouldn’t hesitate to check with the guys at SB. If you have the option to wait for 5, then that may be a good idea. They’ve handled the modals quite nicely.
Also, Smart4Apex has a modal plugin as part of their Bootstrap 3 theme: http://apex-bootstrap.com/apex/f?p=141:1350:0::NO:::#Modal
I see one issue we will have when/if this company switches to APEX 5 when its released.. We have several pages in our app that are hybrid pages.. At times they are called as modal pages and at times they are called as standard pages.. I believe in APEX 5, the page decides if it is a modal or a standard page, not who calls it…
It was a shame that the presentation of APEX 5 last night was canceled, was looking forward to hearing/seeing some of it in action and hearing from Scott..
Thank you,
Tony Miller
LuvMuffin Software
Ruckersville, VA
Quick question, in the document above you talk about adding a redirect to a url for the cancel button on the modal page. This url is a javascript function that does the following: javascript:parent.$(parent.document).apex_modal_page(‘close’);
We are finding an issue and I wonder if you might have a solution to this issue.. When a user clicks a save button on the modal page, it performs a save action, but stays on the modal page. Our users then click the cancel button which calls the above javascript, but the calling interactive report is NOT updated with the changes made in the modal page.
Any ideas on how to get the auto close dynamic action to be fired in this case??
Hi Tony,
make sure that the modal page has a branch that branches to itself. i.e. if your modal page is page 3, then add a branch that fires on SAVE to page 3.
Also make sure that the parent page has a DA that fires on “Auto Close” (see Auto-Close Dynamic Action in the post). That DA should then refresh the report.
I hope that helps.
Thanks for that.. I have one more prying question..
I have a region (a hide show region, with a standard report as its contents). I have a create button that calls a modal edit window to create a new record. The create button has a conditional display such that it should ONLY display if there are no rows in the table we are processing.
Now when I close the modal page, I would like to refresh the region or button, so that the user can NOT add another row. Will calling a refresh of the region refresh the button and thus, hide it from the user or would it be easier to just hide the button after I close the modal page in the auto close dynamic action?
Thank you,
Tony Miller
LuvMuffin Software
Salt Lake City, UT
Pingback: APEX 5: Convert Skillbuilder’s Modal to Universal Theme | Christoph's 2 Oracle Cents
good day
Estimated Patrick Wolf, I need your help about Modal Page which does not refresh my homepage when I enter the information in the pop-up screen,I think it can be for not capturing the id of the page, which is not how, this leads me to the main page of the report is not cool.
Thank you for your support which is very inportant for me.
My name is Freddy am from Colombia.
Freddy,
unfortunately i’m on vacation and won’t be able to help you. Please post the question on the OTN forums. I’m sure someone there can help. Also make sure you followed all the steps precisely.
Christoph
OK THANK YOU VERY MUCH
I’m having a problem getting the report to refresh after the modal page auto close. What’s weird is it works in Chrome on my ubuntu partition, but can’t get it to work in Chrome or IE on my Windows partition. Any thoughts? Suggestions?
I would check the browser console for any errors first.