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.

Before you begin: Prepare the UI components:

• Add a button to a section that you want to modify. For more information, see Adding UI components to a view.
• Create a section that holds the form that you want to display in the modal dialog box. For more information, see Creating sections.
• Create a flow action that opens the section which holds the form. For more information, see About Flow Actions.

1. Open the view that you want to edit.
   For more information, see Accessing views in your application.
2. In the configuration pane on the right side of the window, hover over the control, and then click the Edit icon.
3. In the configuration pane, click Add action sets.
4. Click Create an action set.
5. In the Action set table, click Add an eventClick.
6. In the same row of the table, click Add an actionLaunch: Local action.
7. In the Local action field, select the flow rule that opens the section that has the form fields.
8. In the Target field, select Modal dialog.
9. Optional: To run the flow in the context of an embedded section that uses a data page, in the Using page field, enter the name of the page or page list that you want to use.
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 checkbox.
12. In the Template name field, enter the name of the template that you want to use for the modal dialog box.
13. Optional: To use an animation to open and close the modal dialog box, select the Reveal with animation checkbox, and then specify the settings for Effect, Speed and Accel options.
    For example: To configure a modal dialog box that enters the screen from the left and stops, with a short pull to the left before the stop, set the effect to From... and Left and acceleration to Start... and with pull back.
    Note: You can specify different animations for desktop and mobile applications by selecting the Use different effect in a mobile channel option.
14. Click OK.
15. In the configuration pane, click Apply.

For example:

• Modal dialog box
• Available UI actions