Comment on page
notification
Version Compatibility
notification was introduced in version 4.23.0 of the JourneyApps Container.The
notification UI component displays a message in a top-level bar to the user. It automatically fades out after a few seconds. notification needs to be triggered from JavaScript/TypeScript.main.js
notification.success("Your changes were saved successfully");
Type | Note | Color |
|---|---|---|
success | | Positive |
error | | Negative |
info | | Info |
show | Generic type. Introduced in version 4.27 of the JourneyApps Container | Info (default) |
Version Compatibility
notification supports options since version 4.27 of the JourneyApps Container.Examples:
var options = {
timeout: 5 * 1000 // Display the notification for 5 seconds
};
notification.success("Your changes were saved successfully.", options);
var options = {
color: '#C0FFEE',
timeout: null
};
notification.show("The job was submitted successfully", options);
notification supports an options object as a second parameter with the following valid keys:Key | Description | Example |
|---|---|---|
color | Background color of the notification. Can either be:
Defaults to: info | color: "#C0FFEE"
or
color: "positive" |
textColor | The color the notification's text. Can either be:
Note that if textColor is omitted, it will resolve itself with the following rules:
| textColor: "#333333"
or
textColor: "positive-text" |
timeout | The time (in milliseconds) before the notification disappears.
Note: For no timeout (i.e. the notification displays until the user taps it or clicks on it), set timeout to null.
Defaults to:
| timeout: 5000
or
timeout: null |
buttons | See section below | |
notification supports buttons in the notification bar.A button is an object with the following structure:
{
label: "Button label here",
onPress: function() {
// Callback to execute when button is pressed
}
}
To add buttons to the
notification, add one or an array of the above object to the buttons property of the options object.2 buttons:
var options = {
buttons: [{
label: "Later",
onPress: function() {
// Dismiss the notification
}
}, {
label: "View",
onPress: function() {
// Go to "View"
}
}]
};
notification.info("You have received a new message", options);
1 button:
var options = {
color: 'primary',
buttons: [{
label: "View",
onPress: function() {
// Go to "View"
}
}]
};
notification.show("You have received a new message", options);
Last modified 8mo ago