Friday, 21 July 2017

Using iziToast an Elegant, Responsive, Flexible and Lightweight Notification Plugin in XPages


After the implementation of iziModal in a new XPages application, see my previous blog post 'Using iziModal An Elegant, Responsive, Flexible and Lightweight Modal Plugin in XPages', I also chose a modern notification plugin for this XPages application, IziToast. iziToast is an legant, responsive, flexible and lightweight notification plugin with no dependencies. All modern browsers are supported (Tested in Chrome, Firefox, Opera, Safari, IE10+ and Edge). In order to use iziToast, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: iziToast.
Below are some examples how iziTaost can be used in an XPages application. In the examples I use a simple button to display the notifications.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example a Folder izitoast has been added in the WebContent Folder.
Next the JavaScript and CSS files, iziToast.js and iziToast.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="izitoast/js/iziToast.js"></script>
<link rel="stylesheet" href="izitoast/css/iziToast.css" />

AMD Loader Fix
For iziToast in XPages there is a need for an AMD Loader Fix. Reason: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages.
In this case, I modified the javaScript file iziToast and replaced 'define.amd' with 'false'.
Note: There are other solutions for the AMD Fix. For more information about thes solution see my blog post Bootstrap Plugins in XPages Part VI - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2).

iziToast Plugin initialization
iziToast can be initialized using a simple script. In the example below I used use a button with CSJS.

<xp:button id="button1" value="iziToast Warning" styleClass="btn-warning">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[iziToast.warning({
title: 'Warning',
position: 'center', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
drag: true,
timeout: 10000,
balloon: false,
close: false,
transitionOut: 'fadeOutUp',
message: 'FirstName is a mandatory field.'
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>

It is also possible to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin and include it on the XPage. 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. The name of the id in the script must correspond with the id of the Button.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button4}" ).bind("click",function(){iziToast.info({
title: 'Info',
drag: true,
position: 'center',
timeout: 10000,
balloon: false,
close: false,
transitionOut: 'fadeOutUp',
message: 'FirstName is a mandatory field.!'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result are modern responsive Notifications.



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:styleSheet href="/microlight.css"></xp:styleSheet>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="izitoast/js/iziToast.js"></script>
<link rel="stylesheet" href="izitoast/css/iziToast.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button4}" ).bind("click",function(){iziToast.info({
title: 'Info',
drag: true,
position: 'center',
timeout: 10000,
balloon: false,
close: false,
transitionOut: 'fadeOutUp',
message: 'FirstName is a mandatory field.!'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:panel>
<xp:br></xp:br>
<xp:button id="button1" value="iziToast Warning" styleClass="btn-warning">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[iziToast.warning({
title: 'Warning',
position: 'center', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
drag: true,
timeout: 10000,
balloon: false,
close: false,
transitionOut: 'fadeOutUp',
message: 'FirstName is a mandatory field.'
});]]></xp:this.script>
</xp:eventHandler></xp:button>
<xp:button id="button2" value="iziToast Error" styleClass="btn-danger">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[iziToast.error({
title: 'Error',
position: 'center', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
transitionIn: 'flipInX',
transitionOut: 'flipOutX',
timeout: 10000,
message: 'FirstName is a mandatory field.'
});]]></xp:this.script>
</xp:eventHandler></xp:button>
<xp:button id="button3" value="iziToast Success" styleClass="btn-success">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[iziToast.success({
title: 'Success',
position: 'center', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
timeout: 10000,
message: 'Document has been saved!'
});]]></xp:this.script>
</xp:eventHandler></xp:button>
<xp:button id="button4" value="x$ jQuery Selector" styleClass="btn-info"></xp:button>
<xp:br></xp:br>
</xp:panel>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: iziToast documentation

No comments:

Post a Comment