Skip to main content






Applies only to Mobile Apps and Reactive Web Apps




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

    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 Add custom style classes to the Notification UI 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 Notification UI styles being applied.
    • "myclass1 myclass2" - Adds the myclass1 and myclass2 styles to the Notification UI styles being applied.
    • Was this article helpful?