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

Example

notification.png

To see the notification in action just click here.

Here is the example code of the XWiki widget which displays the inprogress 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>.

Tips

Check out the Javascript code:

Check out the CSS code:

Tags:
Created by Vincent Massol on 2017/09/04
   

Get Connected