Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Configuring a modal dialog box for a list-based layout

Updated on December 13, 2022
Applicable to Theme Cosmos applications

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.

You can configure the modal dialog box for the following elements:
  • Hierarchical table (legacy markup)
  • Navigational tree
  • Table

The following figure represents a table with rows that you can edit in a pop-up modal dialog box.

Table with a modal dialog box
A table with employee data. The user can edit employee information in a modal dialog box.
Before you begin: Create a Hierarchical table, Navigational tree, or Table layout. For more information, see Layouts.
  1. In Dev Studio, search for and open the section that you want to modify.
  2. Click the list-based layout that you want to edit, and then click the View properties icon.
  3. In the Layout properties window, enable row editing in a modal dialog box:
    ChoicesActions
    • Hierarchical table (legacy markup)
    • Navigational tree
    • Table (non-optimized)
    1. On the Operations tab, in the Row operations section, select the Master-detail option.
    2. In the Display of details list, select Modal dialog.
    Table (optimized)On the Operations tab, in the Row operations section, select the Editable in modal option.
  4. Optional: To use the default modal dialog box template, clear the Override default modal template checkbox.
  5. In the Template name field, enter the name of the template that you want to use for the modal dialog box.
  6. Optional: To specify a format of the modal dialog box that is defined in the skin, in the Modal format list, select Other, and then press the down arrow key to select the format that you want to use.
  7. Optional: To specify a flow action that you want to use to display content in the modal dialog box, in the Detail flow action field, enter the name of that action.
  8. Click Submit.
  9. On the section form, click Save.
For example:
Sample modal dialog box configuration for an optimized table
The Editable in modal and Override default template fields are selected. The configuration uses a custom template named editTableRow.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us