FlashMessage

JointJS+ provides a FlashMessage plugin that enables the ability to display flash messages.

Installation

Access FlashMessage via the ui namespace, and create an instance.

import { dia, shapes, ui } from '@joint/plus';

const flashMessage = new ui.FlashMessage({
    title: 'Message',
    type: 'alert',
    content: 'An error occurred. Try again later.'
});

flashMessage.open();

There is also a UMD version available

Include joint.ui.flashMessage.js and joint.ui.flashMessage.css in your HTML. You should also include joint.ui.dialog.js and joint.ui.dialog.css dependencies. FlashMessage inherits from Dialog.

index.html

<link rel="stylesheet" type="text/css" href="joint.ui.dialog.css">
<link rel="stylesheet" type="text/css" href="joint.ui.flashMessage.css">
<script src="joint.js"></script>
<script src="joint.ui.dialog.js"></script>
<script src="joint.ui.flashMessage.js"></script>

Access FlashMessage through the joint.ui namespace:

index.js

const flashMessage = new joint.ui.FlashMessage({
    title: 'Message',
    type: 'alert',
    content: 'An error occurred. Try again later.'
});

flashMessage.open();

How does FlashMessage work?

Flash messages are useful for informing the user that something has happened. As you will see later on on this page, the ui.FlashMessage plugin provides a quick way of displaying messages without you having to worry about closing the message boxes, or cascading them on top of each other.

There are two ways to display flash messages. One is by creating an object of ui.FlashMessage type, and call the open() method on it. However, for convenience, there is also a static method ui.FlashMessage.open() that is much shorter

Common flash message patterns

There are some common patterns when working with flash messages. While the following example doesn't cover every possibility, you will certainly get some inspiration for working with the FlashMessage plugin. Displaying a flash message with a custom width, displaying multiple flash messages, and closing all flash messages are just some of the use cases shown here.

Open Sandbox