PNotify is a JavaScript notification plugin, developed by SciActive. Formerly known as Pines Notify. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use. PNotify works in all major browsers and provides a consistent interface. It is tested thoroughly for consistency. It also can provide non-blocking notices. This allows the user to click elements behind the notice without even having to dismiss it. PNotify uses either Bootstrap or jQuery UI for styling, which means it is fully and easily themeable. In this blog post I will show the basic setup.
In order to use the PNotify Plugin, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub:
.
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example I added a Folder pnotify in the WebContent Folder.
Next the JavaScript and CSS files, pnotify.custom.min.js and pnotify.custom.min.css, must be included on the XPage or Custom Control. In this example I add the files to an XPage.
<script type="text/javascript" src="pnotify/pnotify.custom.min.js"></script>
<link rel="stylesheet" href="pnotify/pnotify.custom.min.css" media="all" type="text/css" />
Basic Setup PNotify in XPagesIn the example below, I use a button to trigger the PNotify notice.
<xp:button value="Regular Notice" id="button1">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Regular Notice',
text: 'PNotify! I am a regular notice.'
});
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
The result is a PNotify regular notice in XPages.
Remark: You need to use CSJS (Client-Side JavaScript) in this case to make it work.
It is aslo possible to use Bootstrap Glyphicon icons and Font Awesome icons in the PNotify notices.
<xp:button value="Notice Bootstrap Icon" id="button2">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Bootstrap Icon',
text: 'I have an icon that uses the Bootstrap icon styles.',
icon: 'glyphicon glyphicon-envelope'
})
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<xp:button value="Notice Font Awesome Icon" id="button3">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Font Awesome Icon',
text: 'I have an icon that uses the Font Awesome icon styles.',
icon: 'fa fa-envelope-o'
})
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
Code XPage<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<script type="text/javascript" src="pnotify/pnotify.custom.min.js"></script>
<link rel="stylesheet" href="pnotify/pnotify.custom.min.css" media="all" type="text/css" />
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div>
<xp:button value="Regular Notice" id="button1">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Regular Notice',
text: 'PNotify! I am a regular notice.'
});
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</div>
<br />
<div>
<xp:button value="Notice Bootstrap Icon" id="button2">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Bootstrap Icon',
text: 'I have an icon that uses the Bootstrap icon styles.',
icon: 'glyphicon glyphicon-envelope'
})
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</div>
<br />
<div>
<xp:button value="Notice Font Awesome Icon" id="button3">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Font Awesome Icon',
text: 'I have an icon that uses the Font Awesome icon styles.',
icon: 'fa fa-envelope-o'
})
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</div>
<br />
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>
In the next blog post more possibilities for using the PNotify pluging in XPages. So stay tuned!
