How to present a row of a repeating layout as a modal dialog

A modal dialog is an interaction with the user — a form to be filled in or a statement to be acknowledged — that pops up in its own window on top of the application. The user cannot continue in the application without processing the form or dismissing the modal dialog. A flow action provides the section or sections containing the form fields that the user is to complete.

If a modal dialog is configured to post data on the clipboard upon an event, then cancelling, or dismissing the modal dialog will not truncate the data on the clipboard.

How modal dialogs work

A modal dialog combines a pop-up window with a flow action as the front most screen where the user is working. The dialog box is centered in the viewing area. The flow action provides the section or sections containing the form fields the user is to complete. When the user submits the form, the system updates the work item and the modal dialog closes. The user can then continue working with the main screen display.

As a best practice, use auto-generated controls within modal dialogs. This ensures accurate server processing if a modal dialog is launched from a list or grid of work items configured with actions. An action on an work item in a list is created in a temporary work processing thread. Auto-generated controls default to this temporary thread, however, non-auto-generated controls may default to use the thread of the base document for AJAX interactions instead of the temporary thread. Using auto-generated controls ensures accurate server processing.

How to use a modal dialog

Your application can present a row of a Grid layout (or an element of a Tree or TreeGrid layout) to users as a modal dialog, for review or editing. From the repeating area in a Tree, Tree Grid, or Grid layout:

1. Select the repeating area and open the properties panel.
2. In the Edit Mode drop-down menu, select Modal Dialog.
3. In the Flow Action field select the flow action the modal dialog will display.
4. Check the Reordering check box to allow the user to drag data rows higher or lower in the display.
5. If you selected Pixels (Fixed) in the Width field on the Grid Repeat, Tree Grid, or Tree Layout properties panels, the Fixed size check box appears.

• If you leave it unchecked, the modal dialog dynamically resizes to display the fields the selected flow action provides.
• If you check this option, specify the height and width of the modal dialog in the fields that appear. If the content is larger than the resulting dialog can display, scroll bars appear at the bottom and/or right side.

6. Click OK to save the settings and close the panel.

From a Button control in a layout cell:

1. Select the cell containing the Button control and display the Properties panel.
2. Click the View properties icon next to the Control field to open the control Parameters dialog.

2. In the Behaviors section, click the Add row icon. This displays the Behavior dialog.
3. In the Event field, select Click.
4. In the Action area, select Launch > Local Action.
5. In the Local Action field, select the local action rule.
6. In the Target field, select Modal Dialog.
7. Click OK to save the settings and close the dialog. The control Parameters dialog re-appears.
8. Click OK to close the dialog.

How to customize modal dialogs

You can specify the colors, corner shapes, and other settings of modal dialogs in the skin. See Skin form — Components tab — General — Modal dialogs. You can also create custom formats for modal dialogs.

Styles that you set in the modal dialog format in the skin are applied to the following modal dialog templates:

• pyModalTemplate is the general template for modal dialogs.
• pyGridModalTemplate is the template for modal dialogs called by Grid, Tree Grid, and Tree layouts.

You can modify this template, for example, to replace the OK and Cancel buttons. Buttons in the modal dialog are styled using the settings in the Standard Button format in the skin.

If you need to modify one of the templates to match the requirements of your application or your user community, save a copy into the class where it will be used.

The implementation and CSS classes for modal dialogs differ, depending upon whether the application is rendered in HTML5 document type - standards mode or in quirks mode. For example, in HTML5 document type – standards mode, modal dialogs honor the design time width of the layout, while, in quirks mode, modal dialogs shrink to the minimum width and height possible. Drag and drop is not supported in modal dialogs rendered in standards mode. If your application contains modal dialogs and is rendered in both standards and quirks modes, generate test cases for each.

PDN Resources

See How to present a flow action as a modal dialog and Displaying a modal dialog in a custom format created in the application skin on the PDN.

User Interface category

Open topic with navigation