namespace sap.m.MessageToast

Control sample: sap.m.MessageToast
Visiblity: public
Available since: N/A
Module: sap/m/MessageToast
Application Component: CA-UI5-CTR

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:

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:

When not to use:

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.



References:


Nodes Overview

Node Description

Methods Overview

Method Description
sap.m.MessageToast.show

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

The only mandatory parameter is sMessage.

sap.m.MessageToast.show

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

The only mandatory parameter is sMessage.

Param Type DefaultValue Description
sMessage string

The message to be displayed.

mOptions object

Object which can contain all other options. Not all entries in this object are required. This property is optional.

duration int 3000

Time in milliseconds before the close animation starts. Needs to be a finite positive nonzero integer.

width sap.ui.core.CSSSize '15em'

The width of the message toast, this value can be provided in %, em, px and all possible CSS measures.

my sap.ui.core.Popup.Dock 'center bottom'

Specifies which point of the message toast should be aligned (e.g. Dock.LeftTop To use as align point the left top corner of the message toast).

at sap.ui.core.Popup.Dock 'center bottom'

Specifies the point of the reference element to which the message toast should be aligned (e.g. Dock.RightBottom To position the message toast according to the bottom right corner of the reference element).

of sap.ui.core.Control Element jQuery Window window

Specifies the reference element to which the message toast should be aligned, by default it is aligned to the browser visual viewport.

offset string '0 0'

The offset relative to the docking point, specified as a string with space-separated pixel values (e.g. "10 5" to move the message toast 10 pixels to the right and 5 pixels to the bottom).

collision string '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".

onClose function

Function to be called when the message toast closes.

autoClose boolean true

Specify whether the message toast should close as soon as the end user touches the screen.

animationTimingFunction string 'ease'

Describes how the close animation will progress. Possible values "ease", "linear", "ease-in", "ease-out", "ease-in-out".

animationDuration int 1000

Time in milliseconds that the close animation takes to complete. Needs to be a finite positive integer. For not animation set to 0.

closeOnBrowserNavigation boolean true

Specifies if the message toast closes on browser navigation.