Summary

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 with other processing in the application before processing the form or dismissing the modal dialog.

How modal dialogs work

A modal dialog combines a pop-up window with a flow action as the frontmost 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 object and the modal dialog closes. The user can then continue working with the main window.

Suggested Approach

Your application can deploy a modal dialog from several places in the user interface:

Repeating layout

From a repeating layout like a tree, grid, or tree grid:

1. Select the repeat section of the display (the illustration shows a grid) and click the magnifying glass icon to open the properties panel:
   
2. In the Edit Mode dropdown menu, select Modal Dialog.
3. In the Flow Action field select the flow action the modal dialog will display.
4. Optionally check the Allow Reordering checkbox to allow the user to drag data rows higher or lower in the display.
5. If you leave the Fixed size checkbox 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 window can display, scroll bars will appear at the bottom and/or right side of the window.
6. Click OK to save the settings and close the panel.

Button control

For new development, use the auto-generated pxButton control rule (introduced in V6.1 SP2) to configure buttons in non-repeating and repeating (grid and tree grid) layouts. See How to use a Button control to display a modal dialog.

From a Button control not in a repeating section:

1. Select the button and click the magnifying glass icon to display its properties:

2. In the Type field select Local Action.
3. In the Local Actions field select the local action you would like the modal dialog to display.
4. Check the Load In Modal Window checkbox.
5. Click OK to save the settings and close the panel.

Express action button

From an express action button set into a cell in a repeating section of a grid or tree grid

1. Drop the button into a cell in the grid or tree grid. Click the magnifying glass to open its properties panel.

2. The Use Section field is set to a gadget, pzGridAction. Click the magnifying glass to open the properties panel for that gadget:
3. Set Type to Selected Item. In the Actiontab you can either:
   • Set the Action field to Open.
   • Set the Action field to Local Action and select an appropriate local action from the options that appear.
4. Click OK to save the settings and close the panel.

Menu bar

From a menu bar or the right-mouse-button context menu: set the Type for the menu item to Selected Item and the Action to Open or some other action that requires or allows user input. See How to configure a menubar in a section using navigation rules.

Styles

Modal dialogs take their colors, corner shapes, and other settings from the application skin created by the Branding Wizard. Select > User Interface > Tools > Branding Wizard to customize those settings. The controls governing modal dialogs are on the Styles and Formats step, in the Special category:

V6.1 provides two modal dialog templates:

• pyModalTemplate is the general template for modal dialogs.

• pyGridModalTemplate is the template for modal dialogs called by grid, tree, and tree grid layouts.

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. You can then make changes not covered by the Branding Wizard, such as adding controls or changing button labels and functions.