Modal Dialog – Planet of the APEX

I wanted to be able to display a modal dialog containing a small report as help for an item. This is easy to implement and can really customize and enhance the help displayed for an item.

First create your modal dialog page you want to display as help. Make sure if this modal will be called from another modal that you set Chained Dialog to No for the modal help page.

On the page you want to call the modal help from, create a hidden page item to store the url. Set the Source Type to PL/SQL Expression and in the Source value or expression enter the following code, replacing ’38’ with the page number of your modal help page:

apex_util.prepare_url('f?p=&APP_ID.:38:&SESSION.::NO:38:', p_triggering_element => '$(''body'')')

Add the following code to the Function and Global Variable Declaration of the page you will be call the help from:

function showHelp() {
 eval($("#PX_YOUR_PAGE_ITEM").val());
}

Last, for the page item you want to display help for, add the following code in the Post Element Text. This will display the help button icon that you normally see when help is entered for a page item and sets the onClick for the button to the showHelp function:

<button class="t-Button t-Button--noUI t-Button--helpButton js-itemHelp" title="Help" aria-label="Help" tabindex="-1" type="button" onclick="showHelp()"><span class="a-Icon icon-help" aria-hidden="true"></span></button>

You can access the demo application here (credentials guest/demo): Modal Dialog Help Demo.

Modal dialogs…I love them, I hate them. Since I’ve discovered them I find them to be very useful but not without their challenges. Two issues I recently had to deal with was being able to use the Skillbuilders SaveBeforeExit plug-in in my modal dialogs, and how to keep the built in ‘X’ cancel button from appearing on select pages. I wanted the ‘X’ to not appear on modal dialogs that have data entry to keep better control over the user exits to prevent accidental data loss. I also wanted to be able to use the SaveBeforeExit plug-in since I have already used extensively throughout my applications and my users were accustomed to it.

If you want to across the board remove the ‘X’ from all modal dialogs called from a page, you can simply include the following in the inline .css on the calling page. However, if you do this and you have help items on your page, it will also remove the ‘X’ on your help pop-ups, which means you won’t be able to close them.

button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close { 
 visibility: hidden !important; 
}

To remove the ‘X’ on select pages, add the following code in the Dialog Attributes for the modal page you wish to remove the ‘X’:

open:function(event,ui){parent.$('.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close').hide();}

I was finding that the Skillbuilders SaveBeforeExit plug-in was not firing to warn users on my modal dialogs. After some research I learned this is a timing issue with when the warning fires and the fact that the modal has already closed and the markup is gone. I came up with a workaround, and although it won’t get you the full features of the plug-in such as highlighting the changed fields, it at least allows you to leverage the change detection and warn the user there are unsaved changes. My modal dialogs that have data entry contain a ‘Close’ button and I wanted to warn users when clicking the button if there were unsaved changes. To do this:

Create a dynamic action on the Click event of your button. In the Condition attribute, select JavaScript expression and enter the following for the Value:

$(document).apex_save_before_exit('modificationDetected');

For your first True action, you will want to use the built in Confirm that comes with APEX (or I like to use the Alertify plug-in) to warn the users there are unsaved changes and ask if they wish to continue.

Your second True action will be a Close Dialog action.

Create a False action that will also be a Close Dialog action.

That’s all there is to it! If changes are detected, the user will be warned and prompted whether to close, otherwise the modal will close.