Skip to Content

Wiki source code of Notification Messages

Last modified by Manuel Leduc on 2026/05/18 12:21
Hide last authors
Guillaume Delhumeau 3.1 1 {{box cssClass="floatinginfobox" title="**Contents**"}}
2 {{toc/}}
3 {{/box}}
Oana Florea 1.1 4
5 {{warning}}
6 This tutorial is a work in progress.
7 {{/warning}}
8
9 {{info}}
10 This is a Javascript widget bundled by default with the XWiki platform.
11 {{/info}}
12
Manuel Leduc 12.1 13 = Reference =
14
15 See the [[Notification Message API reference>>documentation.xs.dev.front-end.notification.api.WebHome]] for an exhaustive documentation of this component API.
16
Oana Florea 1.1 17 = Usage =
18
19 The XWiki notification widget is a general purpose notification JavaScript class, displaying a simple message for the user, at the bottom of the screen.
20 Features:
21
22 * Several default aspects: ##plain##, ##info##, ##warning##, ##error##, ##inprogress##, ##done##.
23 * Stacking of multiple notifications on the screen.
24 * Possibility to replace a notification with another one, preserving the position.
25 * Automatic hide after a configurable period of time.
26 * Configurable icon, background and text color.
27
28 To display a notification, it suffices to create a new ##XWiki.widgets.Notification## object. Constructor parameters:
29
30 |=Parameter|=Description|=Optional
31 |##text##|The notification text|no
32 |##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
33 |##options##|Additional configuration; supported options:(((
34 * ##timeout##: number of seconds to keep the notification on the screen. Use 0 or false to keep it until manually removed.
Manuel Leduc 12.1 35 * ##inactive##: don't show the notification when the object is created, manually call ##show## later>  
Oana Florea 1.1 36 * ##icon##: a custom image to use
37 * ##color##: a custom color for the text
38 * ##backgroundColor##: a custom color for the background
Sergiu Dumitriu 4.1 39 * ##onHide##: a custom function to call when the notification disappears
Manuel Leduc 13.1 40 * {{version since="17.10.9,18.4.0RC1"}}##textHtml##: enable the ##text## to be interpreted as HTML (defaults to ##false##){{/version}}
Oana Florea 1.1 41 )))|yes
42
43 Default parameters for the predefined notification types:
44
45 |=Notification Type|=Parameter Values
46 |##plain##|(((
47 * ##timeout##: 5
48 * ##icon##: none
49 * ##color##: black
50 * ##background##: #EEE
51 )))
52 |##info##|(((
53 * ##timeout##: 5
54 * ##icon##: (i)
55 * ##color##: #28C
56 * ##background##: #DDF
57 )))
58 |##warning##|(((
59 * ##timeout##: 5
60 * ##icon##: /!\
61 * ##color##: 000
62 * ##background##: #FFD
63 )))
64 |##error##|(((
65 * ##timeout##: 10
66 * ##icon##: (!)
67 * ##color##: #900
68 * ##background##: #EDD
69 )))
70 |##inprogress##|(((
71 * ##timeout##: false
72 * ##icon##: spinning
73 * ##color##: #268
74 * ##background##: #EEE
75 )))
76 |##done##|(((
77 * ##timeout##: 2
78 * ##icon##: (v)
79 * ##color##: #090
80 * ##background##: #EFD
81 )))
82
slauriere 6.1 83 = Examples =
Oana Florea 1.1 84
slauriere 8.1 85 {{image reference="notification.png"/}}
Oana Florea 1.1 86
87 {{html}}
88 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>.
89 {{/html}}
90
slauriere 5.4 91 Here is the example code of the XWiki widget which displays the ##warning## notification above:
Oana Florea 1.1 92
Guillaume Delhumeau 3.2 93 {{code language="html"}}
Guillaume Delhumeau 3.1 94 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>.
Oana Florea 1.1 95 {{/code}}
96
slauriere 6.2 97 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##):
slauriere 5.4 98
99 {{code language="javascript"}}
100 var notification = new XWiki.widgets.Notification('Creating group...','inprogress');
101 $.post(createGroupURL, data).done(function() {
102 notification.replace(new XWiki.widgets.Notification('Group created!','done'));
103 }).fail(function() {
104 notification.replace(new XWiki.widgets.Notification('An error occurred','error'));
105 }).always(function() {
106 // ...
107 });
108 {{/code}}
109
Manuel Leduc 13.1 110 {{version since="17.10.9,18.4.0RC1"}}
111 Notification with HTML content
Manuel Leduc 14.1 112
113 {{code language="javascript"}}
114 new XWiki.widgets.Notification('This is <strong>bold</strong>','done', { textHtml: true});
115 {{/code}}
Manuel Leduc 13.1 116 {{/version}}
117
Oana Florea 1.1 118 = Tips =
119
120 Check out the Javascript code:
121
Manuel Smeria 4.2 122 * [[for your wiki instance>>http://localhost:8080/xwiki/bin/skin/resources/uicomponents/widgets/notification.js]]
Guillaume Delhumeau 3.3 123 * from git: {{scm path="xwiki-platform-core/xwiki-platform-web/src/main/webapp/resources/uicomponents/widgets/notification.js"/}}.
Oana Florea 1.1 124
125 Check out the CSS code:
126
Manuel Smeria 4.2 127 * [[for your wiki instance>>http://localhost:8080/xwiki/bin/skin/resources/uicomponents/widgets/notification.css]]
Guillaume Delhumeau 3.3 128 * from git: {{scm path="xwiki-platform-core/xwiki-platform-web/src/main/webapp/resources/uicomponents/widgets/notification.css "/}}.

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected