Create and use a Popup

Last updated
Save as PDF

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:

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

The Popup widget is displayed.
Drag the Popup widget into the Main Content area of your screen.
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.
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.
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.
Select the Close Popup button, and from the On Click dropdown, select New Client Action.
Drag an Assign onto the client action, and set the ShowPopup variable to False.

Clicking the Close Popup button sets the ShowPopup variable to False and closes the popup.
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.

Here's a video tutorial about using Popup in Reactive Web and Mobile App.

Traditional Web

To create and use a popup in Traditional Web Apps:

In Service Studio, in the Toolbox, search for and drag the Link widget into the Actions placeholder of your screen.
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.
Create a new screen for the popup. Select the Widget Tree, and from the Source Web Block dropdown, select Layouts\LayoutPopup.
Delete the Center, Left, and Right placeholders from the screen until you are left with only the MainContent placeholder.
Add the popup content. In this example, we add some text.
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.
From the Toolbox, search for and drag the Popup Editor widget into the Main Content area of your screen.
On the Properties tab, from the LinkOnButtonWidgetId dropdown, select the Link widget Id (in this example, PopupLink.Id).

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.