jsn / ServiceNow, simplified.
AustraliaREFERENCE GUIDE

Create and customize alert messages in UI Builder

ServiceNow documentation·7 min readView source ↗
On this page

Create and customize alert messages in UI Builder

Learn how alert messages help you communicate feedback and status updates using both default and scripted approaches.

Alerts are components that display standardized notifications, such as feedback, warnings, and confirmations. They’re easy to configure without scripting, but you can add a script for more advanced functionality.

[Omitted image “comp-ex-alerts-types.png”] Alt text: A series of different types of alerts.

UI Builder supports several types of alert messages. To see how each one behaves, open the Alert component documentation and try out different settings in the interactive preview.

Parent Topic:Learn components by example

Create alert messages in UI Builder

Add and configure alert messages for simple notifications without scripting.

Before you begin

Role required: ui_builder_admin

About this task

Use the default alert message configuration for simple notifications. In this example, the alert displays a personalized greeting using the logged-in user’s full name.

This procedure uses UI Builder components to create dynamic, interactive layouts. For more information on how to configure components, see:

<table id=“table_exc_zzf_dhc”><thead><tr><th>

Component

</th><th>

Documentation links

</th></tr></thead><tbody><tr><td>

Alert

</td><td>

</td></tr></tbody> </table>[Omitted video] Description: Create and customize alert messages in UI Builder

Procedure

  1. Navigate to All > Now Experience Framework > UI Builder.

  2. Open an experience to work in or create an experience by selecting Create > Experience.

    See Configure how users interact with your applications in UI Builder for more information on creating experiences.

  3. Create a page from scratch.

    For more information about how to create a page, see Create a page in UI Builder.

  4. Add an alert.

    1. In the content tree, select + Add content.

    2. Search for alert and then select Add to place the component on your page.

    3. In the content tree, hover over Alert 1 and select the configure icon [Omitted image "uib-configure-icon.png"] Alt text:, then select Rename.

      [Omitted image "comp-ex-cam-rename.png"] Alt text: Additional actions menu in the content tree open for the alert component, with a cursor hovering over the Rename option.

    4. Replace the text in the Component label field with Welcome Message.

      The Component ID field auto-populates.

    5. Select Apply.

  5. Configure the alert message.

    1. With Welcome Message selected in the content tree, navigate to the configuration panel and set the following properties:

      Field Value or Action Type Info Icon circle-info-outline Header Heads up! Link (Leave blank) — select Edit, then delete any text inside Label and Href Action (Leave blank) — select Edit, set Type to – None –, then delete any text inside Label and Href

      Your configuration panel should look like this:

      [Omitted image “comp-ex-cam-config.png”] Alt text: Configuration panel for alert, with highlights over the component label, Type, Icon, Header, Link, and Action fields.

    2. Hover over the Message field and select the bind data icon [Omitted image "uib-dynamic-data-binding-button.png"] Alt text:.

    3. Select Formulas, then String, then double-click or drag CONCAT to move the formula to the area above.

      [Omitted image "comp-ex-cam-bind-data.png"] Alt text: Bind data dialog showing CONCAT function with empty values.

    4. Double-click value1 to select the field, then select again to insert text.

    5. Enter "You're logged in as ", making sure to include a trailing space after the exclamation point.

    6. Double-click values to select the field, then select again to insert text.

    7. Select Data types, then Page properties.

    8. Under Pill view, select the pills in the following order: session > user > fullName.

    9. Double-click or drag fullName to move it to the area above, then select Apply.

      [Omitted image "comp-ex-cam-bind-data2.png"] Alt text: Bind data dialog showing CONCAT function with "Welcome! " and @context.session.user.fullName as its values.

  6. Save and test your page.

    1. Select Save in the upper-right.

    2. Select Preview.

    The alert appears at the top of the page with the text "Heads up! You're logged in as " followed by the logged-in user's name.

    [Omitted image "comp-ex-cam-alert.png"] Alt text: Alert appearing under the header menu, greeting the logged-in user.

Customize alert messages with a client script in UI Builder

Use a client script to create dynamic, context-sensitive alert messages.

Before you begin

Role required: admin

About this task

Scripted alerts provide notifications that respond to events or external data. They are highly flexible and can react to complex conditions, but require scripting knowledge and more effort to maintain. In this example, a button triggers a client script that generates multiple alerts with custom messages.

This procedure uses UI Builder components to create dynamic, interactive layouts. For more information on how to configure components, see:

<table id=“table_exc_zzf_dhc”><thead><tr><th>

Component

</th><th>

Documentation links

</th></tr></thead><tbody><tr><td>

Button

</td><td>

</td></tr><tr><td>

Alert

</td><td>

</td></tr></tbody> </table>[Omitted video] Description: Create and customize alerts in UI Builder

Procedure

  1. Navigate to All > Now Experience Framework > UI Builder.

  2. Open an experience to work in or create an experience by selecting Create > Experience.

    See Configure how users interact with your applications in UI Builder for more information on creating experiences.

  3. Create a page from scratch.

    For more information about how to create a page, see Create a page in UI Builder.

  4. Add a button.

    1. In the content tree, select + Add content.

    2. Search for button and add it from the toolbox.

    3. In the content tree, hover over Button 1 and select the configure icon [Omitted image "uib-configure-icon.png"] Alt text:, then select Rename.

    4. Replace the text in the Component label field with Showcase Alerts.

      The Component ID field auto-populates.

    5. Select Apply.

  5. Create a client script.

    1. Under Data and scripts, select the + next to Client scripts.

      [Omitted image "comp-ex-cam2-client-scripts.png"] Alt text: Data and Scripts drawer with a highlight over Client scripts.

    2. Replace the text in Script name with Alerts.

    3. Replace the code with the following:

      Tip: You can select the format code icon [Omitted image “comp-ex-dfc-format-code-icon.png”] Alt text: to make the code more readable.

      /**
* @param {params} params
* @param {api} params.api
* @param {any} params.event
* @param {any} params.imports
* @param {ApiHelpers} params.helpers
*/
function handler({
    api,
    event,
    helpers,
    imports
}) {
    api.emit("NOW_UXF_PAGE#ADD_NOTIFICATIONS", {
        items: [
            {
                id: "alert1",
                status: "critical",
                icon: "circle-exclamation-fill",
                content: {
                    type: "html",
                    value: "<h2>Critical: System failure detected!</h2>"                   
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert2",
                status: "high",
                icon: "circle-exclamation-outline",
                content: {
                    type: "string",
                    value: "High: CPU usage exceeded 90%"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert3",
                status: "moderate",
                icon: "circle-pause-outline",
                content: {
                    type: "string",
                    value: "Moderate: Disk space is below 20%"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert4",
                status: "warning",
                icon: "triangle-exclamation-outline",
                content: {
                    type: "html",
                    value: "<h4> Warning: A new software update is ready. </h4>"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert5",
                status: "info",
                icon: "circle-question-fill",
                content: {
                    type: "string",
                    value: "Info: A new software update is available"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert6",
                status: "positive",
                icon: "check-circle-outline",
                content: {
                    type: "string",
                    value: "Positive: Backup completed successfully"
                },
                action: { type: "dismiss" }
            },
            {
                id: "alert7",
                status: "low",
                icon: "bell-fill",
                content: {
                    type: "string",
                    value: "Low: Minor update recommended"
                },
                action: { type: "dismiss" }
            }
        ]
    });
}

    4. Select Apply.

  6. Link the button to the client script with an event.

    1. In the content tree, select the button we created: Showcase Alerts.

    2. In the configuration panel, select the Events tab.

    3. Under the Button clicked event, select Add handler.

    4. Search for alerts, then select the Alerts handler under Client Scripts.

      [Omitted image "comp-ex-cam2-events.png"] Alt text: Events dialog showing the handler for the Alerts client script selected.

    5. Select Continue.

    6. Select Add.

  7. Save and test your page.

    1. Select Save in the upper-right.

    2. Select Preview.

    Selecting the button displays multiple alerts with messages that you define in the client script.

    [Omitted image "comp-ex-cam2-alerts.png"] Alt text: UI Builder editor showing a button and a series of custom scripted alerts.

Keep exploring.

Find another answer, or bring this documentation into your own tools.

Search the library →Read via the REST API ↗