Modal dialog box templates

Pega 7 Platform provides templates for creating modal dialog boxes. These templates help the designers model business process flow. The following standard modal dialog box templates are available:

• pzModalFlowTemplate - This template is used for starting a flow in a modal dialog box.
• pzModalTemplate - This is a standard template used for creating a typical modal dialog box to start a local action from a modal dialog box.
• pzGridModalTemplate - This template is used for creating a modal dialog box with a repeating layout to display records in a tree, grid, or tree grid format.
• pzGridExpandPaneTemplate - This template is referenced by an expanded pane for creating a modal dialog box with an option to overwrite or display detailed information about a row item in the grid. The flow action for the expanded pane is displayed in the same section.
• pzGridEmbedPaneTemplate - This template is referenced by the embedded pane. The flow action for the selected row in the report list will be embedded in another section or appears after the grid. Embedded panes are useful when there is a requirement to edit, update, or preview information that is excluded from the primary view, such as information that is not directly related to the task or is too detailed to display.

You can create customized modal dialog box templates by overriding the templates.

Customizing modal dialogs

You can specify the color, 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. See PDN article Displaying a modal dialog in a custom format created in the application skin.

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 these templates, 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.

You can modify a template to match the requirements of your application or your user community:

1. In the Designer studio search field, enter the modal dialog template name(example pzGridModalTemplate).
2. In the results list, click the template name.
3. In the Label field in the Section Record Configuration pane, enter a description for the template.
4. In the Context pane, select the branch from the Development branch menu.
5. For the Apply to field, select the class where the template will be used from the dropdown menu.
6. For the Add to Ruleset field, select the ruleset from the dropdown menu.
7. Click Create and open

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.

	flow action, skin rule
	About Sections About Flow Actions

User Interface category

Open topic with navigation