UI Builder || Alert messages on custom pages

[JagjeetSingh]

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

[Martin76]

Other types of action would be `acknowledge`, which shows an OK button, and `open`.

This even seems to be documented in Alert Overview & API.

[JagjeetSingh]

Thanks for adding it Martin. 🙂

[Jefferson]

Hi everyone, 

Does anyone know if these messages can contain multiple lines? I've tried using option 2 (the page script), with html. But for some reason the box doesn't expand, and it doesn't show the remaining text. It is not even showing the "Show more" action.

This is the code I'm using:

api.emit("NOW_UXF_PAGE#ADD_NOTIFICATIONS", {
        items: [{
            id: "alert1",
            status: "info",
            icon: "circle-check-outline",
            content: {
                type: "html",
                value: "<p>This is the first line</p><p>This is the second line.</p>"
            },
            action: {
                type: "dismiss"
            },
        }]
    });

 
This is what I get:

Any ideias?

Cheers,

Jefferson

[a116170]

Wrap it in div's: "<div><p>This is the first line</p><p>This is the second line.</p></div>"

[Paul Sisson]

I appreciate you brother. Well done, and thank you.