Friday, 27 October 2017

Create Responsive and Highly Customizable Notifications in XPages Using the jQuery Lobibox Plugin


Earlier this week I blogged about the jQuery LobiPanel Plugin, Extended Bootstrap Panels in XPages Using the jQuery LobiPanel Plugin. Another great jQuery plugin in this series is Lobibox. Lobibox is a responsive jQuery Notification plugin written from scratch. Lobibox is devided into two parts, Messageboxes and Notifications. In this blog post I will describe the Notifications part. LobiPanel has some similarities with the iziToast jQuery plugin. For more information about iziToast see my previous blog post Using iziToast an Elegant, Responsive, Flexible and Lightweight Notification Plugin in XPages. Lobibox is very easy to implement in any XPages application.

Features
- Different color support
- Possibility to show in any position of screen
- Delay
- Show delay indicator
- Show with image
- Sound support
- Size support. You can show notifications of different size

Default options for lobibox notifications
title: true, (Title of notification. Set this false to disable title)
size: 'normal', (normal, mini, large)
soundPath: 'src/sounds/', (The folder path where sounds are located)
soundExt: '.ogg', (Default extension for all sounds)
showClass: 'zoomIn', (Show animation class)
hideClass: 'zoomOut', (Hide animation class)
icon: true, (Icon of notification. Leave as is for default icon or set custom string)
msg: '', (Message of notification)
img: null, (Image source string)
closable: true, (Make notifications closable)
delay: 5000, (Hide notification after this time)
delayIndicator: true, (Show timer indicator)
closeOnClick: true, (Close notifications by clicking on them)
width: 400, (Width of notification box)
sound: true, (Sound of notification. Set this false to disable sound)
position: "bottom right", (Place to show notification)
iconSource: "bootstrap", ("bootstrap" or "fontAwesome")
rounded: false, (Whether to make notification corners rounded)
messageHeight: 60, (Notification message maximum height)
pauseDelayOnHover: true, (When you mouse over on notification, delay will be paused)
onClickUrl: null, (The url which will be opened when notification is clicked)
showAfterPrevious: false, (Set this to true if you want notification not to be shown until previous notification is closed. This is useful for notification queues)

In order to use Lobibox, the JavaScript en CSS files need to be included on the XPage / Custom Control. The latest version can be downloaded from from Github: Lobibox
Below a some examples using Lobibox in an XPages application.

Adding the JS file
The JavaScript file must be added to the WebContent Folder in the Package Explorer.
In this example a Folder lobibox has been added in the WebContent Folder.
Next the JavaScript and CSS files lobibox.js and lobibox.css must be included on the XPage or Custom Control. In this example I added the file to an XPage.
Remark: if only the Notification part is used in an XPages application the lobibox.js file can be replaced by the notifictions.js file.

<link rel="stylesheet" href="lobibox/css/lobibox.css" />
<script type="text/javascript" src="lobibox/js/lobibox.js"></script>

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button5}" ).bind("click",function(){Lobibox.notify('warning', {
size: 'mini',
rounded: false,
delay: 30000,
sound: true,
delayIndicator: true,
icon: true,
position: 'bottom left',
soundPath: 'lobibox/sounds/',
soundExt: '.ogg',       
msg: 'Notification Type Warning.'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive and highly customizable Notification including some additional options in the initial setup.


Sample 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">
<xp:this.resources>
<xp:script src="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<link rel="stylesheet" href="lobibox/css/lobibox.css" />
<script type="text/javascript" src="lobibox/js/lobibox.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){Lobibox.notify('default', {
pauseDelayOnHover: true,
continueDelayOnInactiveTab: false,
delay: 30000,
position: 'bottom left',
msg: 'LobiBox - A Responsive jQuery notification plugin .'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button2}" ).bind("click",function(){Lobibox.notify('info', {
size: 'mini',
rounded: true,
sound: false,
delay: 30000,
position: 'bottom left',
delayIndicator: false,
msg: 'Notification Type Info.'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button3}" ).bind("click",function(){Lobibox.notify('success', {
size: 'mini',
rounded: false,
delay: 30000,
sound: false,
delayIndicator: true,
position: 'bottom left',
icon: true,
msg: 'Notification Type Success.'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock4">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button4}" ).bind("click",function(){Lobibox.notify('error', {
size: 'normal',
rounded: false,
delay: 30000,
sound: false,
delayIndicator: true,
icon: true,
position: 'bottom left',
img: 'images/wat9.png',
msg: 'Notification Type Error.'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock5">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button5}" ).bind("click",function(){Lobibox.notify('warning', {
size: 'mini',
rounded: false,
delay: 30000,
sound: true,
delayIndicator: true,
icon: true,
position: 'bottom left',
soundPath: 'lobibox/sounds/',
soundExt: '.ogg',       
msg: 'Notification Type Warning.'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:button id="button1" value="DEFAULT" styleClass="btn-default"></xp:button>
<xp:button id="button2" value="INFO" styleClass="btn-info"></xp:button>
<xp:button id="button3" value="SUCCESS" styleClass="btn-success"></xp:button>
<xp:button id="button4" value="ERROR" styleClass="btn-danger"></xp:button>
<xp:button id="button5" value="WARNING" styleClass="btn-warning"></xp:button>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Documentation and examples Lobibox Notifications

No comments:

Post a Comment