---
sourceDocument: Australia Build or modify applications
sourceDocumentLink: https://www.servicenow.com/docs/r/application-development

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Create and customize alert messages in UI Builder

# Create and customize alert messages in UI Builder {#ariaid-title1}

* Release version: Australia
* 
* Updated March 12, 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 5 minutes to read

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.  
Figure 1. Alert message types

UI Builder supports several types of alert messages. To see how each one behaves, open the [Alert component documentation](https://horizon.servicenow.com/workspace/components/now-alert?release=zurich#overview) and try out different settings in the interactive preview.

## Create alert messages in UI Builder {#ariaid-title2}

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:

* [Add and configure components](https://www.servicenow.com/docs/S25G6VJ3jD8Bu7gj_TwOLA#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.")
* [UI Builder Quick Bits: Navigating Component Configuration](https://www.servicenow.com/community/next-experience-blog/ui-builder-quick-bits-navigating-component-configuration/ba-p/3181624)
{#comp-ex-create-alert-messages__ul_et1_5sg_dhc}  
{#comp-ex-create-alert-messages__table_exc_zzf_dhc__entry__2}

| Component | Documentation links |
|-|-|
| Alert | * [Usage Guidelines](https://horizon.servicenow.com/workspace/components/now-alert?release=zurich) * [UIB Setup](https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/now-components/now-alert/uib-setup%23properties) {#comp-ex-create-alert-messages__ul_ryg_ltm_khc} |
[Table 1. Components used in this procedure]

{#comp-ex-create-alert-messages__table_exc_zzf_dhc}

### Procedure

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://www.servicenow.com/docs/xRTj74jSaNpx1gbYEFN~zw "Learn what an experience is in UI Builder. Understand what an experience contains.") 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](https://www.servicenow.com/docs/gGPA7eivyM0RFTMUEX~LWw "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.").
4. Add an alert.
   1. In the content tree, select + Add content.
   2. Search for <kbd class="ph userinput">alert</kbd> 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 ![](), then select Rename.  
   4. Replace the text in the Component label field with <kbd class="ph userinput">Welcome Message</kbd>.  
      The Component ID field auto-populates.
   5. Select Apply.
   {#comp-ex-create-alert-messages__substeps_tdv_gwm_khc}
5. Configure the alert message.
   1. With Welcome Message selected in the content tree, navigate to the configuration panel and set the following properties:  
      {#comp-ex-create-alert-messages__table_xwg_bxm_khc__entry__2}

      | 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 |
      [ ]

      {#comp-ex-create-alert-messages__table_xwg_bxm_khc}

      Your configuration panel should look like this:

   2. Hover over the Message field and select the bind data icon ![]().
   3. Select Formulas, then String, then double-click or drag CONCAT to move the formula to the area above.  
   4. Double-click value1 to select the field, then select again to insert text.
   5. Enter <kbd class="ph userinput">"You're logged in as "</kbd>, 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: sessionuserfullName.
   9. Double-click or drag fullName to move it to the area above, then select Apply.  
   {#comp-ex-create-alert-messages__substeps_yjd_wwm_khc}
6. Save and test your page.
   1. Select Save in the upper-right.
   2. Select Preview.

   {#comp-ex-create-alert-messages__substeps_fvf_5ln_khc}  
   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.

## Customize alert messages with a client script in UI Builder {#ariaid-title3}

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:

* [Add and configure components](https://www.servicenow.com/docs/S25G6VJ3jD8Bu7gj_TwOLA#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.")
* [UI Builder Quick Bits: Navigating Component Configuration](https://www.servicenow.com/community/next-experience-blog/ui-builder-quick-bits-navigating-component-configuration/ba-p/3181624)
{#comp-ex-customize-alert-messages__ul_et1_5sg_dhc}  
{#comp-ex-customize-alert-messages__table_exc_zzf_dhc__entry__2}

| Component | Documentation links |
|-|-|
| Button | * [Usage Guidelines](https://horizon.servicenow.com/workspace/components/now-button?release=zurich) * [UIB Setup](https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/now-components/now-button/uib-setup%23properties) {#comp-ex-customize-alert-messages__ul_pcz_swn_khc} |
| Alert | * [Usage Guidelines](https://horizon.servicenow.com/workspace/components/now-alert?release=zurich) * [UIB Setup](https://developer.servicenow.com/dev.do#!/reference/next-experience/zurich/now-components/now-alert/uib-setup%23properties) {#comp-ex-customize-alert-messages__ul_ryg_ltm_khc} |
[Table 2. Components used in this procedure]

{#comp-ex-customize-alert-messages__table_exc_zzf_dhc}

### Procedure

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://www.servicenow.com/docs/xRTj74jSaNpx1gbYEFN~zw "Learn what an experience is in UI Builder. Understand what an experience contains.") 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](https://www.servicenow.com/docs/gGPA7eivyM0RFTMUEX~LWw "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.").
4. Add a button.
   1. In the content tree, select + Add content.
   2. Search for <kbd class="ph userinput">button</kbd> and add it from the toolbox.
   3. In the content tree, hover over Button 1 and select the configure icon ![](), then select Rename.
   4. Replace the text in the Component label field with <kbd class="ph userinput">Showcase Alerts</kbd>.  
      The Component ID field auto-populates.
   5. Select Apply.
   {#comp-ex-customize-alert-messages__substeps_dtj_mtn_khc}
5. Create a client script.
   1. Under Data and scripts, select the + next to Client scripts.  
   2. Replace the text in Script name with <kbd class="ph userinput">Alerts</kbd>.
   3. Replace the code with the following:  
      Tip:  
      You can select the format code icon ![]() 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.
   {#comp-ex-customize-alert-messages__substeps_gn3_d5n_khc}
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 <kbd class="ph userinput">alerts</kbd>, then select the Alerts handler under Client Scripts.  
   5. Select Continue.
   6. Select Add.
   {#comp-ex-customize-alert-messages__substeps_c1k_3vn_khc}
7. Save and test your page.
   1. Select Save in the upper-right.
   2. Select Preview.

   {#comp-ex-customize-alert-messages__substeps_nm4_2wn_khc}  
   Selecting the button displays multiple alerts with messages that you define in the client script.

*[\>]: and then