The Notification UI Pattern is a contextual short message that provides important information to the user, such as app crashes, new updates, task reminders, and new messages.
How to use the Notification UI Pattern
In Service Studio, in the Toolbox, search for
The Notification 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.
From the Toolbox, drag the Animate widget into the Main Content area of your application's screen.
Add the relevant content to the Content placeholder.
In this example, we add an icon, some text. We also add Show and Close buttons to the Main Content area of the screen.
Select and right-click your screen name, and select Add Local Variable. Enter a name for the variable. In this example, we enter
ShowNotificationand set the Default Value to False.
Select the Notification widget, and on the Properties tab, from the IsOpen dropdown, enter the newly created variable.
Define the actions for the Show and Close buttons, by selecting the button widget, and on the Properties, from the OnClick dropdown select New Client Action.
In this example, for the Show button we assign the ShowNotification variable to True, and for the Close button we assign the ShowNotification variable to False.
After following these steps and publishing the module, you can test the pattern in your app.
|IsOpen (Boolean): Mandatory||If True, the notification is immediately visible on screen. If False, the notification is not visible on screen.|
|ExtendedClass (Text): Optional||Adds custom style classes to the Pattern. You define your custom style classes in your application using CSS.