Notification Messages
Last modified by Marius Dumitru Florea on 2021/08/24
Usage
The XWiki notification widget is a general purpose notification JavaScript class, displaying a simple message for the user, at the bottom of the screen.
Features:
- Several default aspects: plain, info, warning, error, inprogress, done.
- Stacking of multiple notifications on the screen.
- Possibility to replace a notification with another one, preserving the position.
- Automatic hide after a configurable period of time.
- Configurable icon, background and text color.
To display a notification, it suffices to create a new XWiki.widgets.Notification object. Constructor parameters:
| Parameter | Description | Optional |
|---|---|---|
| text | The notification text | no |
| type | The notification type, one of plain, info, warning, error, inprogress, done. If an unknown or no type is passed, plain is used by default. | yes |
| options | Additional configuration; supported options:
| yes |
Default parameters for the predefined notification types:
| Notification Type | Parameter Values |
|---|---|
| plain |
|
| info |
|
| warning |
|
| error |
|
| inprogress |
|
| done |
|
Examples
To see the notification in action just click here.
Here is the example code of the XWiki widget which displays the warning notification above:
To see the notification in action just click <a href="#Example" onclick="new XWiki.widgets.Notification('This tutorial is a work in progress.', 'warning');">here</a>.
Here is a JavaScript snippet for displaying an inprogress notification and replacing it by another one upon request completion or error (snippet taken and adapted from AdminGroupSheet):
var notification = new XWiki.widgets.Notification('Creating group...','inprogress');
$.post(createGroupURL, data).done(function() {
notification.replace(new XWiki.widgets.Notification('Group created!','done'));
}).fail(function() {
notification.replace(new XWiki.widgets.Notification('An error occurred','error'));
}).always(function() {
// ...
});
$.post(createGroupURL, data).done(function() {
notification.replace(new XWiki.widgets.Notification('Group created!','done'));
}).fail(function() {
notification.replace(new XWiki.widgets.Notification('An error occurred','error'));
}).always(function() {
// ...
});
Tips
Check out the Javascript code:
- for your wiki instance
- from git: http://www.github.com/xwiki/xwiki-platform/tree/master/xwiki-platform-core/xwiki-platform-web/src/main/webapp/resources/uicomponents/widgets/notification.js.
Check out the CSS code:
