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

Example

main.js
notification.success("Your changes were saved successfully");

Notification types

Type
Note
Color
success
Positive
error
Negative
info
Info
show
Generic type. Introduced in version 4.27 of the JourneyApps Container
Info (default)

Options

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:
  • a hex value
  • a named color
Defaults to: info
color: "#C0FFEE" or color: "positive"
textColor
The color the notification's text. Can either be:
  • hex value
  • a named color
Note that if textColor is omitted, it will resolve itself with the following rules:
  • If the specified color is a named color, textColor is automatically set to that named color's text counterpart (e.g. primary_text for primary).
  • If the specified color is a hex value, textColor is automatically set to #333333 (dark) or #FFFFFF (light), whichever has the greatest contrast with the background color.
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:
  • 3000 (3 seconds) if no buttons are present
  • null if buttons are present
timeout: 5000 or timeout: null
buttons
See section below

Buttons

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.

Examples:

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);