Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Modal

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • You can use the Modal UI Pattern to interrupt the end user and demand an action. It is implemented to direct an end user’s attention to important information. Ideal for when the end user is requested to enter information critical to continuing the current process.

    How to use the Modal UI Pattern

    For the purposes of this example, our app already contains a form where the user can enter their queries, and once they send their message, a confirmation message appears by using the Modal widget.

    1. In Service Studio, in the Toolbox, search for Modal.

      The Modal widget is displayed.

    2. To From the Toolbox, drag the Modal widget into the Main Content area of your application's screen, and on the Properties tab, enter a name for the widget. In this example we enter Confirmation.

      By default, the Modal widget contains Title, Icon, Content, and Footer placeholders.

    3. Add your content to the placeholders. In this example we add text to the Title placeholder, text to the Content placeholder, and 2 buttons (Yes and No) to the Footer placeholder.

    4. In this example, to open the Modal widget, we need to set the Method and Destination properties for the Yes button. To do this, select the Yes button, and on the Properties tab, from the Method drop-down, select Ajax Submit and from the Destination select New Screen Action.

    5. Enter a name for the screen action. In this example, we enter ConfirmSend.

    6. Select the Logic tab, navigate to OutSystemsUIWeb > Modal and drag the ToggleModal onto the screen action.

    7. On the properties tab, from the WidgetId drop-down, select the Id of the Modal widget. In this example, we select Confirmation.Id.

    8. In this example, to close the Modal, we need to set the Method and Destination properties for the No button. To do this, double-click your screen name, select the No button, and on the Properties tab, from the Method drop-down, select Ajax Submit and from the Destination select the screen action you previously created. In this case ConfirmSend.

    9. On the Properties tab, you can change the Modal's look and feel by setting the (optional) properties.

    After following these steps and publishing the module, you can test the pattern in your app.

    The result of this example looks something like the following:

    Properties

    Property Description
    Position (PositionExtended Identifier): Optional Set the position of the Modal on the screen.

    Examples

    • Blank - The modal is positioned in the center of the screen (Entities.PositionExtended.Center). This is the default.
    • Entities.PositionExtended.TopLeft - The modal is positioned top-left of the screen.
    HasOverlay (Boolean): Optional If True, an overlay is enabled behind the modal. This is the default. If False, there is no overlay.
    EnterAnimation (EnterAnimation Identifier): Optional Define from where the animation enters the screen.

    Examples

    • Blank - The animation goes from a small size to its rendered size (Entities.EnterAnimation.EnterScale). This is the default.
    • Entities.EnterAnimation.EnterBottom - The animation enters from the bottom of the screen.
    LeaveAnimation (LeaveAnimation Identifier ): Optional Define from where the animation leaves the screen.

    Examples

    • Blank - The animation goes from its rendered size to a small size.(Entities.LeaveAnimation.EnterScale). This is the default.
    • Entities.LeaveAnimation.EnterBottom - The animation leaves from the bottom of the screen.
    ExtendedClass (Text): Optional Add custom style classes to the Modal UI Pattern. You define your custom style classes in your application using CSS.

    Examples

    • Blank - No custom styles are added (default value).
    • "myclass" - Adds the myclass style to the Modal UI styles being applied.
    • "myclass1" "myclass2" - Adds the myclass1 and myclass2 styles to the Modal UI styles being applied.
    • Was this article helpful?