Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

 

 

OutSystems

Create and use a Popup

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • We've been working on this article. Please let us know how useful this new version is by voting.

    You can use a popup to show information to users or ask them to enter information. Correctly used popups help you create a good user experience, because the users remain on the same page.

    Reactive Web and Mobile

    To create and use a popup in Reactive Web and Mobile Apps:

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

      The Popup widget is displayed.

      Popup widget

    2. Drag the Popup widget into the Main Content area of your screen.

      Drag widget onto screen

    3. Add a variable of boolean data type to the screen by right-clicking on your screen name (located in the element tree) and selecting Add Local Variable. In this example, we call the variable ShowPopup.

      Add new local variable

      Set variable to type Boolean

    4. Select the Popup widget, and on the Properties tab, enter the new variable for the Show Popup property. This toggles the popup according to the variable value.

      Set variable to type Boolean

    5. Add your content to the popup.

      In this example, we add some text and a Close Popup button. We also add a Show Popup button to the Actions screen area.

      Add content to popup

    6. Select the Close Popup button, and from the On Click dropdown, select New Client Action.

      Create New Client Action

    7. Drag an Assign onto the client action, and set the ShowPopup variable to False.

      Add Assign to client action

      Clicking the Close Popup button sets the ShowPopup variable to False and closes the popup.

    8. Repeat steps 6 and 7 for the Open Popup button, substituting the variable value to True. Clicking the Open Popup button sets the ShowPopup variable to True and opens the popup.

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

    Traditional Web

    To create and use a popup in Traditional Web Apps:

    1. In Service Studio, in the Toolbox, search for and drag the Link widget into the Actions placeholder of your screen.

      Drag Link widget to the screen

    2. Enter a name and some text for the link. In this example we enter PopupLink for the link name and Show Popup as the link text. Ensure the Method property is set to Navigate.

      Enter link name and text

    3. Create a new screen for the popup. Select the Widget Tree, and from the Source Web Block dropdown, select Layouts\LayoutPopup.

      Web Block source properties

    4. Delete the Center, Left, and Right placeholders from the screen until you are left with only the MainContent placeholder.

      Web Block source properties

    5. Add the popup content. In this example, we add some text.

      Popup content

    6. Select your main screen again, and from the Properties tab, set the link's On Click destination property to the popup screen you just created.

      Link destination

    7. From the Toolbox, search for and drag the Popup Editor widget into the Main Content area of your screen.

      Drag popup editor to screen

    8. On the Properties tab, from the LinkOnButtonWidgetId dropdown, select the Link widget Id (in this example, PopupLink.Id).

      Drag popup editor to screen

      You can also create a screen action for the Popup Editor widget by selecting New Screen Action from the Destination dropdown. In this example, we select New Screen Action, but leave the flow of the action empty.

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