How to Fire a Close Event on Dialog X Button Click

By default, the X button on dialog pages cancels and closes the dialog when clicked. Today, I came across a situation where I needed to trigger a dialog close dynamic action on the parent page whenever the dialog is closed. However, I can't rely on users always clicking my dialog close button. I could remove the X button, but I want to keep it consistent with all other dialogs.

Overriding the Default X button Behavior

1. Define a custom JavaScript function to trigger a custom event when the dialog closes. Add this function to your page's JavaScript (either on the parent page, page 0, or in your global JavaScript file):

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

2. In the modal dialog page attributes, navigate to the "Dialog" section and set the "Attributes" property to:

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

This overrides the default close behavior and triggers a custom event named "customDialogClose" when the dialog is closed, including when the "X" button is clicked

Creating a Dynamic Action on the Parent Page

3. On the parent page, create a new dynamic action with the following settings:

• Event: Custom

• Custom Event: customDialogClose

• Selection Type: JavaScript Expression

• JavaScript Expression: document

4. Add the desired actions to this dynamic action, such as refreshing regions, setting item values, or executing JavaScript code

Additional Considerations

• This approach will handle both the "X" button click and other cancellation methods, such as using a dynamic action with a "Cancel Dialog" action.

• The custom event will be triggered on the parent page, allowing you to perform actions after the dialog is closed.

• You can use the data attribute (modalPageId in the example) to differentiate between multiple modal dialogs if needed.