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.
- 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.
- Open the view that you want to edit.For more information, see Accessing views in your application.
- In the configuration pane on the right side of the window, hover over the control, and then click the Edit icon.
- In the configuration pane, click Add action sets.
- Click Create an action set.
- In the Action set table, click .
- In the same row of the table, click .
- In the Local action field, select the flow rule that opens the section that has the form fields.
- In the Target field, select Modal dialog.
- 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.
- 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.
- Optional: To use the default modal dialog box template, clear the Override default modal template check box.
- In the Template name field, enter the name of the template that you want to use for the modal dialog box.
- Optional: To use an animation to open and close the modal dialog box, select the
Reveal with animation check box, and then specify the settings
for Effect, Speed and
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.
- Click OK.
- In the configuration pane, click Apply.