Modal dialogs

Comparison between modal dialogs and pop-up pages

A modal dialog is similar to a pop-up page as it opens a dialog box to display a page over the main application content. However, a modal dialog is different in a number of ways;

• When a modal dialog is open, its parent page cannot be accessed. The parent page is grayed out and ignores any user action.
• Changing the page in the modal dialog, either by submitting a form or by clicking a link, causes it to close. The parent page is changed, with the following exceptions:
  • If the linked page has the same ID as the current modal page, for example, a Save & New button or link, it is refreshed in the same modal window.
  • If the link has the DISMISS_MODAL attribute set to false, the linked page opens in the same modal window.
  • If the link has the OPEN_MODAL attribute set to true, it opens in a new modal window.
• The usage of modal dialogs is less complex that the usage of pop-up pages, and consists of using either one or two optional attributes on the LINK element.

Using modal dialogs

By default, a new page opens in the same window. You can choose to open a LINK element in a modal dialog by setting the OPEN_MODAL attribute to true as shown.

<LINK PAGE_ID="MultiSelectWidgetResult" OPEN_MODAL="true" />

Setting OPEN_MODAL on a LINK inside an ACTION_CONTROL of type SUBMIT has no effect.

Setting OPEN_MODAL=true on a link implies DISMISS_MODAL=false so DISMISS_MODAL=true is ignored.

Similarly, setting DISMISS_MODAL=false implies OPEN_MODAL=false so you don't need to set it.

Configuring individual modal dialogs

To configure individual modal dialogs, set the WINDOW_OPTIONS attribute on a LINK element where the OPEN_MODAL attribute is set to true. The WINDOW_OPTIONS attribute is formatted as a comma-separated list of name value pairs.

Multiple options can be set by using this attribute. The parameter that is supported is width. width sets the width of the modal dialog and is measured in pixels as shown in the following example.

<LINK PAGE_ID="MultiSelectWidgetResult" OPEN_MODAL="true"
WINDOW_OPTIONS="width=600, height=auto-calculated" />

For the WINDOW_OPTIONS attribute, the width value is a simple integer with no alphabetic characters appended. Where no width parameter is specified, a default width of 600 pixels is used. If an unsupported parameter is placed in the WINDOW_OPTIONS, a build time exception results.

Where the WINDOW_OPTIONS attribute is also specified on the PAGE element of the page that a LINK element points to, it takes precedence over the value that is specified on the LINK element.

The height is automatically calculated to accommodate the page contents. The height is based on the content. If there is more content than can fit in the modal, then the height is based on a percentage of the browser window height. The modal.dialogs.minimum.height property in the ApplicationConfiguration.properties file no longer affects modal height and must not be used.

Controlling individual modal dialogs from custom JavaScript

You can control individual modal dialogs with custom JavaScript by using the provided curam.util.UimDialog API. For more information, see the full API documentation in <cdej-dir>\doc\JavaScript\index.html.

Loading custom non-UIM pages in a modal dialog

Custom non-UIM pages must hook into a specific set of API functions to work correctly in a modal dialog. These functions are provided by the curam.util.Dialog API. For more information, see the full API documentation in <cdej-dir>\doc\JavaScript\index.html.

Enabling movable modal dialogs

While users cannot interact with the on-page content while a modal dialog is active, you can use custom JavaScript to make modal dialogs draggable. Users can then drag a modal dialog to see content on the application page while they complete their task. A sample JavaScript file is provided to help you to customize this behavior for all modal dialogs at a global application level.

Copy the webclient/components/core/WebContent/CDEJ/jscript/curam/application/modal/ModalHooks.js file to a custom component so you can implement this behavior.

In your custom ModalHooks.js file, implement the enableDraggableModals(modalRoot) function. The modalRoot node of modal dialogs is available in this function and you can update it to enable movable modal dialogs across the application.

One of the most common ways to implement a movable modal dialog is to use event listeners. The event listeners can listen for when a user drags a modal dialog and update the position of the node by using the style attribute.