Namespace sap.m.MessageToastModule: sap/m/MessageToast


A small, non-disruptive popup for messages.

Overview

A message toast is a small, non-disruptive popup for success or information messages that disappears automatically after a few seconds. Toasts automatically disappear after a timeout unless the user moves the mouse over the toast or taps on it.

Notes:

  • If the configured message contains HTML code or script tags, those will be escaped.
  • Line breaks (\r\n, \n\r, \r, \n) will be visualized.
  • Only one message toast can be shown at a time in the same place.

Example:

Here is an example of a MessageToast with all default options:

sap.m.MessageToast.show("This message should appear in the message toast", {
    duration: 3000,                  // default
    width: "15em",                   // default
    my: "center bottom",             // default
    at: "center bottom",             // default
    of: window,                      // default
    offset: "0 0",                   // default
    collision: "fit fit",            // default
    onClose: null,                   // default
    autoClose: true,                 // default
    animationTimingFunction: "ease", // default
    animationDuration: 1000,         // default
    closeOnBrowserNavigation: true   // default
});

Usage

When to use:

  • You want to display a short success of information message.
  • You do not want to interrupt users while they are performing an action.
  • You want to confirm a successful action.

When not to use:

  • You want to display an error or warning message.
  • You want to interrupt users while they are performing an action.
  • You want to make sure that users read the message before they leave the page.
  • You want users to be able to copy some part of the message text. (In this case, show a success Message Dialog.)

Responsive Behavior

The message toast has the same behavior on all devices. However, you can adjust the width of the control, for example, for use on a desktop device.


Since: 1.9.2.
Method Summary
sap.m.MessageToast.show(sMessage, mOptions?)Creates and displays a simple message toast notification message with the given text, and optionally other options.
Method Detail
sap.m.MessageToast.show(sMessage, mOptions?): void

Creates and displays a simple message toast notification message with the given text, and optionally other options.

The only mandatory parameter is sMessage.

Parameters:
stringsMessageThe message to be displayed.
objectmOptions?Object which can contain all other options. Not all entries in this object are required. This property is optional.
intmOptions.duration?, Default: 3000Time in milliseconds before the close animation starts. Needs to be a finite positive nonzero integer.
sap.ui.core.CSSSizemOptions.width?, Default: '15em'The width of the message toast, this value can be provided in %, em, px and all possible CSS measures.
sap.ui.core.Popup.DockmOptions.my?, Default: 'center bottom'Specifies which point of the message toast should be aligned.
sap.ui.core.Popup.DockmOptions.at?, Default: 'center bottom'Specifies the point of the reference element to which the message toast should be aligned.
sap.ui.core.Control|Element|jQuery|Window|undefinedmOptions.of?, Default: windowSpecifies the reference element to which the message toast should be aligned, by default it is aligned to the browser visual viewport.
stringmOptions.offset?, Default: '0 0'The offset relative to the docking point, specified as a string with space-separated pixel values (e.g. "0 10" to move the message toast 10 pixels to the right).
stringmOptions.collision?, Default: 'fit fit'Specifies how the position of the message toast should be adjusted in case it overflows the screen in some direction. Possible values “fit”, “flip”, “none”, or a pair for horizontal and vertical e.g. "fit flip”, "fit none".
functionmOptions.onClose?, Default: Function to be called when the message toast closes.
booleanmOptions.autoClose?, Default: trueSpecify whether the message toast should close as soon as the end user touches the screen.
stringmOptions.animationTimingFunction?, Default: 'ease'Describes how the close animation will progress. Possible values "ease", "linear", "ease-in", "ease-out", "ease-in-out". This feature is not supported in android and ie9 browsers.
intmOptions.animationDuration?, Default: 1000Time in milliseconds that the close animation takes to complete. Needs to be a finite positive integer. For not animation set to 0. This feature is not supported in android and ie9 browsers.
booleanmOptions.closeOnBrowserNavigation?, Default: trueSpecifies if the message toast closes on browser navigation.