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 button

Updated on November 15, 2021
Applicable to Theme UI-Kit applications

Display records for reviewing or editing in an interactive pop-up window by configuring a button in a layout cell that opens a modal dialog box.

  1. Open the section that you want to modify.
  2. Click the cell that contains the button control that you want to edit, and then click the View properties icon.
  3. In the Cell properties window, click the Actions tab.
  4. Click the Create an action set button.
  5. In the Action set table, click Add an eventClick.
  6. Click Add an actionLaunch: Local action.
  7. In the Local action field, select the local action rule that provides the section with the form fields for the user to complete or review.
  8. In the Target field, select Modal dialog.
  9. Optional: To run the flow in the context of an embedded section that uses and embedded or a top-level page, in the Using page field enter a Page or a Page List.
  10. Optional: To specify a custom format of the modal dialog box that is defined in the skin, in the Modal format list, select Other, and then select the format that you want to use.
  11. Optional: To use the default modal dialog box template, clear the Override default modal template check box.
  12. Optional: To display the modal dialog box as full screen on a mobile device, select the Display as full screen on mobile device check box.
  13. Optional: To open and close the modal dialog box with an animation, select the Reveal with animation check box, and then specify the settings for Effect, Speed and Accel options.
    Note: You can specify different animations for desktop and mobile applications.
    For example: You can configure a modal dialog box that quickly enters the screen from the left and slows down to a stop, with a short pull to the left before the stop by setting the effect to From... and Left and acceleration to Start... and with pull back.
  14. Optional: To specify a page as a context for the flow, use the default template or display the modal dialog box as full screen on a mobile device, configure the remaining options.
  15. Click Submit.
  16. Click Save.

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