If you are building your custom page on UI builder and want to show a message based on certain conditions then here are the ways to do it.

1. From "Add alert notifications" event:

The page event handler "Add alert notifications" can be used to show the message. The event can be triggered from page events, page component events or from data sources.

See here if you want to know what are events and how to use them.

Below is the sample payload to show a info message from "Add alert notifications" event. It accepts two parameters.

The type property accepts info, warning and error values. Message should be a string.

Info Message

Warning Message

Error Message

2. From page script

You can show more detailed and html enabled messages from the page scripts. Below is an example of the warning message which is triggered from page script. (The page script can be triggered from the events)

api.emit("NOW_UXF_PAGE#ADD_NOTIFICATIONS", {
        items: [{
            id: "alert1",
            status: "critical",
            icon: "circle-check-outline",
            content: {
                type: "html",
                value: "<h4>" + "This is a critical message from script" + "<h4>"
            },
            action: {
                type: "dismiss"
            },
        }]
    });

"api.emit" is used to trigger the events on page. The syntax is: api.emit("EVENT_NAME", {EVENT_PARAMETERS});

In above example:

NOW_UXF_PAGE#ADD_NOTIFICATIONS is the event name. You need not to create it as it comes with the page.

Items : The event parameter passed as an array.

Id : it can be any random string. But if you are triggering two messages at same time then you need to assign different Id's to both of them. Otherwise only one alert will show up.

Status : It can be info, warning, high, low, positive, moderate or critical. (See image below to see how different status are rendered.)

icon : The icon at the beginning of the message. You can check the icons in the icon library here or just refer from a component like iconic button.

content : The type and value of the message. Supports html or string.

action : So far I have only tried dismiss type. Not sure if other types exist.

Thank you for taking time to check it out.