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.
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:
| Component | Documentation links |
|---|---|
| Alert | - Usage Guidelines - UIB Setup |
[Omitted video] Description: Create and customize alert messages in UI Builder
Procedure
Navigate to All > Now Experience Framework > UI Builder.
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.
Create a page from scratch.
For more information about how to create a page, see Create a page in UI Builder.
Add an alert.
In the content tree, select + Add content.
Search for
alertand then select Add to place the component on your page.In the content tree, hover over Alert 1 and select the configure icon
, then select **Rename**.
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**.
Configure the alert message.
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:
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
.
3. Select **Formulas**, then **String**, then double-click or drag **CONCAT** to move the formula to the area above.
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**.
Bind data dialog showing CONCAT function with "Welcome! " and @context.session.user.fullName as its values.
Save and test your page.
Select Save in the upper-right.
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.
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:
| Component | Documentation links |
|---|---|
| Button | - Usage Guidelines - UIB Setup |
| Alert | - Usage Guidelines - UIB Setup |
[Omitted video] Description: Create and customize alerts in UI Builder
Procedure
Navigate to All > Now Experience Framework > UI Builder.
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.
Create a page from scratch.
For more information about how to create a page, see Create a page in UI Builder.
Add a button.
In the content tree, select + Add content.
Search for
buttonand add it from the toolbox.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 `Showcase Alerts`.
The **Component ID** field auto-populates.
5. Select **Apply**.
Create a client script.
- Under Data and scripts, select the + next to Client scripts.
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
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**.
Link the button to the client script with an event.
In the content tree, select the button we created: Showcase Alerts.
In the configuration panel, select the Events tab.
Under the Button clicked event, select Add handler.
Search for
alerts, then select the Alerts handler under Client Scripts.
Events dialog showing the handler for the Alerts client script selected.
5. Select **Continue**.
6. Select **Add**.
Save and test your page.
Select Save in the upper-right.
Select Preview.
Selecting the button displays multiple alerts with messages that you define in the client script.
UI Builder editor showing a button and a series of custom scripted alerts.