MessageBox

Introduction

The MessageBox utility class implements some convenience functionality based on the Dialog control. MessageBox defines a template that can be easily configured with the method parameters. Each method of the MessageBox class addresses a different use case: alert(), confirm(), and show(). The MessageBox is always used when a Dialog control would be too much overhead (since there are no restrictions regarding the content of a Dialog, it can consist of any combination of controls).

Asynchronous Nature of MessageBox

There is one big difference between the dialogs provided by the framework's MessageBox class and the standard JavaScript boxes such as alert, confirm, input: MessageBox acts event-driven. When calling one of the MessageBox methods, a dialog control is created and opened (rendered in the page). Then the method returns: The browser monitors the user activity and sends the events to the control (for example, the user has moved the dialog, or resized it). Each such interaction is delivered as a separate event and processed by the control or one of its children. When the user finally closes the dialog (for example by clicking the close icon), this browser click event is also processed by the dialog. The dialog is closed and the callback function is triggered.

This means that your code will receive the result of the show() or confirm() method in the callback function, and not as a return value of one of the two methods.

Examples

A Simple Alert Box: alert()

This is the basic use case of the MessageBox control. It creates a purely informational dialog with any message and an OK button:


How it looks like (UX theme)

An alert window can be configured with any text to be displayed. You can register a callback function that is called when the dialog is closed by the user, and you can specify a title. For details about the parameters and their defaults, see the API documentation. The following code sample shows a typical usage of the alert() function:

A Simple Confirmation Question: confirm()

A simple way to request a user decision is using MessageBox.confirm(sMessage,fnCallback,sTitle). Such a MessageBox has a question mark icon as well as an OK and a Cancel button. The given callback will receive a boolean value as parameter, which is true if the user clicked "OK" and false if the user clicked "Cancel" or the X-close button.


How it looks like (UX theme)

The following code sample shows a typical usage of the confirm() function:

General MessageBox Dialog: show()

A more flexible but still simple way to display popup dialogs containing error, success, information, or warning messages is offered by the

MessageBox.show(sMessage,oIcon,sTitle,vActions,fnCallback,oDefaultAction)

method. All exept the first parameter are optional. The strength of this method is how oIcon and vActions let you choose from pre-defined enumerations: For the icons you can use preset values like

sap.ui.commons.MessageBox.Icon.WARNING or

sap.ui.commons.MessageBox.Icon.ERROR.

For the buttons to be displayed, you can use values such as

sap.ui.commons.MessageBox.Action.YES or

sap.ui.commons.MessageBox.Action.NO.

The labeled buttons will be displayed, and the dialog result given to the callback method will equal the value of the selected button.


How it looks like (UX theme)

The following code sample shows a typical usage of the show() function:


API Documentation

See API documentation

See also: Dialog