Overriding the Default Properties of Inline Dialogs

When using inline modal, you can display them using the openModal JavaScript function.

That function is wrapping the jQuery UI Dialog Open method.

/* **********************************************
     From Theme42.js
********************************************** */
window.openModal = function(pDialogId, pDialogTriggerId, pSetFocusId, pClear) {
        $("#" + pDialogId).dialog("open")
    }

What we can do to override the default properties is to set them either on page or right before calling the Open method.

Let's say we would like to have a smaller dialog (e.g. height of 200px)

Option 1

On page load

$('#INLINE_REGION_STATIC_ID').dialog('option', 'height', 200);

Then you can use

openModal('INLINE_REGION_STATIC_ID');

or

$('#INLINE_REGION_STATIC_ID').dialog('open');

Option 2

When openning the Dialog:

$('#INLINE_REGION_STATIC_ID').dialog('option', 'height', 200).dialog('open')

For more information, you can have a look at the Dialog Widget documentation

Handling Dialog Cancel Event

If you ever had to handle a modal dialog close to trigger some action on the parent page, you probably used a dynamic action using the "Dialog Closed" event.

When closing a modal dialog there are two ways to do it.

1. Close
• Using an after submit process of type "Close Dialog";
• Using a dynamic action with a "Close Dialog" action;
• Branching to a page that has a "Normal" page mode.
2. Cancel
• Using a dynamic action with a "Cancel Dialog" action;
• Clicking on the top right "X" icon/button.

When using a branch to close the modal dialog, the modal dialog will close then it's parent will branch to the specified page.

Except when using the branch method, when you close the modal dialog, Apex will trigger a "Dialog Close" event. Then, on the parent page, you will be able to handle it using a dynamic action "Dialog Closed" event.
The thing is that the cancel methods will not trigger any event on the parent page. So, by default, you won't be able to handle the dialog close when it was cancelled.

One way to have both the close and cancel method trigger an even on the parent page would be to override the dialog close event (Apex is using jQuery's  UI Dialog Widget).

So what we will do is this.

You will need to define the following JavaScript function (either on the parent pages, on page 0 or in your JavaScript global library file)

function customEvent(event, data){
    apex.event.trigger(document, event, data);
}

Then, under the modal dialog page attributes, in the dialog section, set the "Attributes" to:

close: function() { customEvent('customDialogClose', {modalPageId: 'MODAL_CLOSE_FIXED'});}

What this will do is that it will trigger (on the parent page) the event "customDialogClose".
The second parameter is a data attribute that could be used to differentiate modals between each other. It can can be useful if you are calling more than one on the parent page or if you want to send data back to the parent page.

Finally, in your parent page you can define a custom dynamic action as follow:

Event: Custom
Custom Event: customDialogClose
Selection Type: JavaScript Expression
JavaScript Expression: document

One thing to note is that the default close event will still be triggered when using the close method.

You can have a look at my Demo Application

iOS Modal Scrolling

If you ever tried to scroll a modal page from within Safari on iOS you probably noticed that what is getting scrolled is the parent page content and not the actual modal content.

There is a simple fix for that:

body .ui-dialog .ui-dialog-content{
    -webkit-overflow-scrolling: touch;
}

If you're not using the built-in modal, the idea is to add the css property to the wrapping element of the iframe.
Let's say you're using Skillbuilders' Modal Plugin, you can use the following:

#cboxLoadedContent{
    -webkit-overflow-scrolling: touch;
}

You can have a look at my Demo Application

Close Modal Dialog When Clicking Outside

A couple weeks ago someone on apex.world slack asked a question regarding how to capture the cancel dialog event.

Juergen Schuster came up with a solution using the dialog's page attribute "Attributes" (under the Dialog section) to add/define the dialog with a custom close callback when initializing it.

Using the same logic we can use it to define a new open callback that will trigger the close dialog method when clicking outside the dialog.

Let's define the following JavaScript function on the parent page (if you're going to be using this in more than one place, I suggest you define it either on the page 0 or in a global javascript file)

function closeDialogClickOutside(elem){
   $('.ui-widget-overlay').click(function(){
      $(elem).dialog('close');
   });
}

Then we simply have to set call the function when the dialog opens.
Which we can do by setting the Dialog's attribute "Attributes" to this:

open: function( event, ui ) { closeDialogClickOutside(this); }

Here's what you will get:

You can have a look at my Demo Application