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