Skip to main content




Applies only to Mobile Apps and Reactive Web Apps
Service Studio version:


  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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

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

      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.

    2. From the Toolbox, drag the Animate widget into the Main Content area of your application's screen.

    3. 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.

    4. Select and right-click your screen name, and select Add Local Variable. Enter a name for the variable. In this example, we enter ShowNotification and set the Default Value to False.

    5. Select the Notification widget, and on the Properties tab, from the IsOpen dropdown, enter the newly created variable.

    6. 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.

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


    Property Description
    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.


    • Blank - No custom styles are added (default value).
    • "myclass" - Adds the myclass style to the UI styles being applied.
    • "myclass1 myclass2" - Adds the myclass1 and myclass2 styles to the UI styles being applied.
    You can also use the classes available on the OutSystems UI. For more information, see the OutSystems UI Live Style Guide.
    • Was this article helpful?