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

However, you cannot use a modal dialog if the data source of the repeating layout is a report definition rule.

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 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 control in a layout cell:

1. Select the cell containing the button control and display its properties panel.
2. Click the magnifying glass 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 section, select Launch > Local Action from the Select... menu.
5. In the Local Action field, select the 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.

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.

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 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