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

Search this space

 

Most popular tags

Failed to execute the [groovy] macro
  1. access rights
  2. activity stream
  3. annotation
  4. attachment
  5. comment
  6. Document Tree Macro
  7. export
  8. Extension Manager
  9. Flamingo skin
  10. global user
  11. Groovy event listener
  12. group
  13. nested page
  14. search
  15. skin
  16. syntax
  17. user
  18. user profile
  19. velocity macros
  20. wiki
  21. wysiwyg
  22. XWiki Applications
  23. xwikiattachment_archive table
  24. xwikiattachment table
  25. xwikiattrecyclebin table
  26. xwikiproperties table

[Display all tags from this space]