Links

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