LinkedIn
Copied!

Table of Contents

Configuring a modal dialog box for a button

Version:

Only available versions of this content are shown in the dropdown
Applicable to Theme Cosmos applications

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.

Prepare the UI components:
  • Add a button to a section that you want to modify. For more information, see Adding controls.
  • 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 event Click .

  6. In the same row of the table, click Add an action Launch: 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 check box.

  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 check box, and then specify the settings for Effect, Speed and Accel options.

    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.
    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.

Sample configuration of a modal dialog box action set
An action set launches the openReview local action in a modal dialog box.

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.