XWiki Notification Widget

The XWiki Notification Widget is a configurable JavaScript class used for displaying messages at the bottom of the page (by default). 

Parameters

NameOptionalAllowed valuesDescriptionDefault value
textNoA stringThe text displayed by the widgetNone
typeYes
  • plain
  • info
  • warning
  • error
  • inprogress
  • done
The notification typeplain
optionsYes
  • timeout: the number of seconds to display the notification. To keep the notification until it will be manually removed, you can set the timeout to 0 or to false.
  • inactive: if the option is inactive, the notification won't be displayed after the creation of the object. This is used when you need to manually call show() at a later time.
  • icon: a custom image to display.
  • background: the hexadecimal value of a background color.
  • onHide: a custom function that is called when the notification disappears.
Additional configuration parameters for the supported typesSee the below paragraph

Configuration Parameters for Supported Types

The source code is available on GitHub:

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

Example

Supposing you have an application which sends emails to different groups depending on the value of the "sendemail" parameter. When "sendemail=1" you want to display a notification message on the center of the page. A code example would be:

{{velocity output="false"}}
#set($discard = $xwiki.ssx.use('Sandbox.InfoNotification'))

#if($request.sendemail == 1 and "${context.action}" == 'view')
  #set($urlview = $doc.getExternalURL('view'))
  #set($creator = $doc.getCreator())
  #set($sender = $xwiki.getDocument(${creator}).getObject('XWiki.XWikiUsers').getProperty('email').value)  
  #set($pageattachments=[])#set($user = $context.user)
  #set($emailrecipient = "admin@mydomain.com")    

  #set($emailcontent = "
 Hello
<br/><br/>
 An email message was sent to your address <br/><br/>
${urlview}
<br/><br/>")

  #set($ok = $xwiki.mailsender.sendHtmlMessage("$sender", "$emailrecipient", $xwiki.null, $xwiki.null, "An email message was sent to your address", $emailcontent, $doc.getContent(), $pageattachments))
#end
{{/velocity}}

{{velocity}}
#if($request.sendemail == 1 and "${context.action}" == 'view')
{{html clean="false"}}
 <script type="text/javascript">
  document.observe('xwiki:dom:loaded', function(){
     new XWiki.widgets.Notification('Confirmation message.', 'info', '20');
  });
 </script>
{{/html}}
#end
{{/velocity}}

We want to display the message to the center of the page and on a red background and by default the info notification message is displayed at the bottom of the page and on a blue background. We would then need to override the default CSS rules which are available on GitHub. In our case we have overridden the rules for the .xnotification-container class in order to display the message on the center of the page:

.xnotification-container {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  width: 100%;
  text-align: center;
  z-index: 1200;
  display: block !important;
}

For the red background, we have overridden the rules for the .xnotification-info class as follows:

.xnotification-info {
  background-color: #CB2A2A !important;
  color:  #fff;
  border-color:  #fff;

Finally, we loading the page with the "?sendemail=1" parameter, the notification message below should appear:

NotificationWidget.png

Related Pages

Trying to decide between Cloud and On Premise? See the comparison on the XWiki Help Center.

Search this space