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.
In Service Studio, in the Toolbox, search for
The Modal widget is displayed.
If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:
a. Go to Module > Manage dependencies.
b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.
c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.
d. Search for and select the element you want to add, and click Apply.
e. In Service Studio, in the Toolbox, search for the widget again.
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
By default, the Modal widget contains Title, Icon, Content, and Footer placeholders.
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.
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.
Enter a name for the screen action. In this example, we enter
Select the Logic tab, navigate to OutSystemsUIWeb > Modal and drag the ToggleModal onto the screen action.
On the properties tab, from the WidgetId drop-down, select the Id of the Modal widget. In this example, we select Confirmation.Id.
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.
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:
|Position (PositionExtended Identifier): Optional||Set the position of the Modal on 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.
|LeaveAnimation (LeaveAnimation Identifier ): Optional||Define from where the animation leaves the screen.
|ExtendedClass (Text): Optional||Adds custom style classes to the Pattern. You define your custom style classes in your application using CSS.