Notification Messages

Last modified by Marius Dumitru Florea on 2021/08/24

This tutorial is a work in progress.

This is a Javascript widget bundled by default with the XWiki platform.

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:

ParameterDescriptionOptional
textThe notification textno
typeThe notification type, one of plain, info, warning, error, inprogress, done. If an unknown or no type is passed, plain is used by default.yes
optionsAdditional configuration; supported options:
  • timeout: number of seconds to keep the notification on the screen. Use 0 or false to keep it until manually removed.
  • inactive: don't show the notification when the object is created, manually call show later>   
  • icon: a custom image to use
  • color: a custom color for the text
  • backgroundColor: a custom color for the background
  • onHide: a custom function to call when the notification disappears
yes

Default parameters for the predefined notification types:

Notification TypeParameter Values
plain
  • timeout: 5
  • icon: none
  • color: black
  • background: #EEE
info
  • timeout: 5
  • icon: information
  • color: #28C
  • background: #DDF
warning
  • timeout: 5
  • icon: /!\
  • color: 000
  • background: #FFD
error
  • timeout: 10
  • icon: error
  • color: #900
  • background: #EDD
inprogress
  • timeout: false
  • icon: spinning
  • color: #268
  • background: #EEE
done
  • timeout: 2
  • icon: (v)
  • color: #090
  • background: #EFD

Examples

notification.png

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() {
 // ...
});

Tips

Check out the Javascript code:

Check out the CSS code:

Tags:
   

Get Connected