How to create a modal dialog

;xxxxxxxxxxx REVISE FOR GRP-7426 use a Report Definition rule as a data source & Button control

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

You cannot use a modal dialog if the data source is a Report Definition.

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 object and the modal dialog closes. The user can then continue working with the main screen display.

How to use a modal dialog

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 dropdown menu, select Modal Dialog.
3. In the Flow Action field select the flow action the modal dialog will display.
4. Check the Allow Reordering checkbox to allow the user to drag data rows higher or lower in the display.
5. If you selected px-fixed in the Width field on the Grid Repeat, Tree Grid, or Tree Layout properties panels, the Fixed size checkbox 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 in a layout cell:

1. Select the button and display its properties panel. The Control field contains pxButton.
2. Click the magnifying glass icon next to it and open the Control Parameters dialog.
   

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

?????????????From a menu bar or the right-mouse-button context menu: for example, set the Type for the menu item to Selected Item and the Action to Open.

How to customize modal dialogs

Modal dialogs take their colors, corner shapes, and other settings from the application skin created by the Branding Wizard. The section governing modal dialogs is on the Custom Styling screen, in the Special category.

Process Commander V6.1 and higher provides two 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.

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.

PDN Resources

See Pega Developer Network article PRKB-26113 How to present a flow action as a modal dialog.

	flow action, skin rule
	About Section rules About Flow Action rules

User Interface category