MsgBox

import {MsgBox} from 'cx/widgets';

The MsgBox class provides utility methods for displaying alerts and confirmation windows.

Both alert and yesNo methods accept either just a message string, or a configuration object, with the following properties:

message - message string,
title - window title (string),
header - window header (Cx component),
items or children - list of child elements (for rich content),
store - store to be used in the new Window instance,
style - window style,
yesText - custom yes text, default value: Yes,
noText - custom no text, default value: No,
okText - custom OK text, default value: OK.

MsgBoxes

<Button
    onClick={() => {
        MsgBox.alert({ message: 'This is an alert!', title: 'Title' })
    }}
>
    Alert
</Button>

<Button
    onClick={() => {
        MsgBox
            .yesNo({ message: 'Would you like to see another alert?', yesText: "Yes, please", noText: "No, thanks" })
            .then((btn) => {
                if (btn == 'yes')
                    MsgBox.alert('Here it is.')
            });
    }}
>
    Custom Yes or No
</Button>

Copied!Cx Fiddle

Methods

Methods
MsgBox.alert(options) Displays an alert window. The `options` parameter may be a string or a configuration object with properties such as `message`, `title` and `store` (see full list above). Result is a `Promise` which is resolved once the user clicks OK.
MsgBox.yesNo(options) Displays a confirmation window with two options (yes and no). `options` parameter may be a string or a configuration object with properties such as `message`, `title` and `store` (see full list above). Result is a `Promise` which is resolved once the user clicks one of the options.

In case you need to display rich content such as links or images inside the message box, pass it through children instead of message.

Documentation

MsgBox

Methods

MsgBox.alert(options)

MsgBox.yesNo(options)