Modal dialog box
Modal dialog boxes help users focus on a specific task. Because users cannot continue in the application without processing or dismissing the modal dialog box, the modal dialog box also might provide you with tools to highlight required fields and actions.
Launching modal dialog boxes
Pega Platform provides the following methods for creating modal dialog boxes:
- Flow action
- You can configure a flow action in a Launch: local action set. The flow action provides the section or sections with the form fields that the user needs to complete. When users submit the form, the system updates the work item and the modal dialog box closes. The users can then continue working from the main screen. For more information, see Configuring a modal dialog box for a button.
- Table action
- Hierarchical table, Navigational tree, and Table layouts support modal dialog boxes as table-specific actions. For editing rows, modal dialog boxes can use the flow-in model. For more information, see Configuring a modal dialog box for a list-based layout.
Templates
You can use the following modal dialog box templates to model the process flow when you design your application:
- pzModalFlowTemplate
- Starts a flow in a modal dialog box.
- pzModalTemplate
- Creates a typical modal dialog box to start a local action.
- pzGridModalTemplate
- Creates a modal dialog box that has a repeating layout to display records in a hierarchical list, hierarchical table, or a table format.
- pzGridExpandPaneTemplate
- Creates a modal dialog box that has an option to overwrite data or display detailed information about a row item in the table in an expanded pane. The flow action for the expanded pane is in the same section as the pane.
- pzGridEmbedPaneTemplate
- Creates a modal dialog box with an embedded pane. The flow action for the selected row in the list is embedded in another section or appears after the table. You can use embedded panes 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 that is too detailed for the system to display.
You can customize each out-of-the-box template and save it as a section for future reuse.
- Configuring a modal dialog box for a button
Divide your user interface into smaller, context-sensitive chunks that appear only when relevant. By pairing a modal dialog box to a button, you can hide optional forms until the users request them. For example, you can add a Review button that users can click to correct their address information when they finalize an online order.
- Configuring a modal dialog box for a list-based layout
Give your users the tools to edit entries of a list-based layout in a modal dialog box. This approach helps your users perform their tasks without leaving the main screen, which reduces context switching.
- Configuring confirmation modal dialog boxes
Ensure that users do not unintentionally lose work by configuring confirmation modal dialog boxes (dirty forms) that web browsers display natively. For example, after a user changes a name in a case and tries to close that case, the system displays a modal dialog box with a message that unsaved changes might be lost.
Previous topic Loading data pages asynchronously Next topic Configuring a modal dialog box for a button