Wiki source code of Notification Messages

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

Show last authors
1 {{box cssClass="floatinginfobox" title="**Contents**"}}
2 {{toc/}}
3 {{/box}}
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
13 = Usage =
14
15 The XWiki notification widget is a general purpose notification JavaScript class, displaying a simple message for the user, at the bottom of the screen.
16 Features:
17
18 * Several default aspects: ##plain##, ##info##, ##warning##, ##error##, ##inprogress##, ##done##.
19 * Stacking of multiple notifications on the screen.
20 * Possibility to replace a notification with another one, preserving the position.
21 * Automatic hide after a configurable period of time.
22 * Configurable icon, background and text color.
23
24 To display a notification, it suffices to create a new ##XWiki.widgets.Notification## object. Constructor parameters:
25
26 |=Parameter|=Description|=Optional
27 |##text##|The notification text|no
28 |##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
29 |##options##|Additional configuration; supported options:(((
30 * ##timeout##: number of seconds to keep the notification on the screen. Use 0 or false to keep it until manually removed.
31 * ##inactive##: don't show the notification when the object is created, manually call ##show## later>
32 * ##icon##: a custom image to use
33 * ##color##: a custom color for the text
34 * ##backgroundColor##: a custom color for the background
35 * ##onHide##: a custom function to call when the notification disappears
36 )))|yes
37
38 Default parameters for the predefined notification types:
39
40 |=Notification Type|=Parameter Values
41 |##plain##|(((
42 * ##timeout##: 5
43 * ##icon##: none
44 * ##color##: black
45 * ##background##: #EEE
46 )))
47 |##info##|(((
48 * ##timeout##: 5
49 * ##icon##: (i)
50 * ##color##: #28C
51 * ##background##: #DDF
52 )))
53 |##warning##|(((
54 * ##timeout##: 5
55 * ##icon##: /!\
56 * ##color##: 000
57 * ##background##: #FFD
58 )))
59 |##error##|(((
60 * ##timeout##: 10
61 * ##icon##: (!)
62 * ##color##: #900
63 * ##background##: #EDD
64 )))
65 |##inprogress##|(((
66 * ##timeout##: false
67 * ##icon##: spinning
68 * ##color##: #268
69 * ##background##: #EEE
70 )))
71 |##done##|(((
72 * ##timeout##: 2
73 * ##icon##: (v)
74 * ##color##: #090
75 * ##background##: #EFD
76 )))
77
78 = Examples =
79
80 {{image reference="notification.png"/}}
81
82 {{html}}
83 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>.
84 {{/html}}
85
86 Here is the example code of the XWiki widget which displays the ##warning## notification above:
87
88 {{code language="html"}}
89 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>.
90 {{/code}}
91
92 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##):
93
94 {{code language="javascript"}}
95 var notification = new XWiki.widgets.Notification('Creating group...','inprogress');
96 $.post(createGroupURL, data).done(function() {
97 notification.replace(new XWiki.widgets.Notification('Group created!','done'));
98 }).fail(function() {
99 notification.replace(new XWiki.widgets.Notification('An error occurred','error'));
100 }).always(function() {
101 // ...
102 });
103 {{/code}}
104
105 = Tips =
106
107 Check out the Javascript code:
108
109 * [[for your wiki instance>>http://localhost:8080/xwiki/bin/skin/resources/uicomponents/widgets/notification.js]]
110 * from git: {{scm path="xwiki-platform-core/xwiki-platform-web/src/main/webapp/resources/uicomponents/widgets/notification.js"/}}.
111
112 Check out the CSS code:
113
114 * [[for your wiki instance>>http://localhost:8080/xwiki/bin/skin/resources/uicomponents/widgets/notification.css]]
115 * from git: {{scm path="xwiki-platform-core/xwiki-platform-web/src/main/webapp/resources/uicomponents/widgets/notification.css "/}}.

Get Connected