Skip to main content

Table of Contents

Configuring a modal dialog box for a list-based layout


Only available versions of this content are shown in the dropdown
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
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:

    Choices Actions
    • 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 check box.

  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.

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.

Related Content

Did you find this content helpful?

Have a question? Get answers now.

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

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

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

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us