Tuesday, 7 November 2017

Responsive and Highly Customizable Messageboxes in XPages Using the jQuery Lobibox Plugin


Last week I blogged about the jQuery LobiPanel Plugin, Extended Bootstrap Panels in XPages Using the jQuery LobiPanel Plugin and the jQuery Lobibox Plugin, Create Responsive and Highly Customizable Notifications in XPages Using the jQuery Lobibox Plugin. As I mentioned in these blog posts, Lobibox is devided into two parts, Messageboxes and Notifications. In this blog post I will describe the Messageboxes part. Lobibox is very easy to implement in any XPages application.

Features Messageboxes
Lobibox messagesboxes can be modal and not modal.
You can show multiple messages at the same time.
Use any available animation class for showing and hiding messageboxes.
Every message can be draggable (on small screens dragging is disabled).
You can show:
Messagesboxes in different colors and icons.
Confirm message.
One line prompt (Any HTML5 input type can be used in prompt window. Such as: text, color, date, datetime, email, number, range etc).
Multiline prompt.
Progress messagebox. Lobibox comes with default progress style but you can use bootstrap or any other style progress bar.
Custom content window with ajax support with custom action buttons.
Every message is an instance of plugin. You can easily grab the instance and attach events or call methods directly on the instance.

For the different 'types' of messagboxes (Confirm, Alert, Prompt, Progress and Window) there are specific default options. Below the default options for all messageboxes.

Default options
horizontalOffset: 5, (if the messagebox is larger (in width) than window's width. The messagebox's width is reduced to window width - 2 * horizontalOffset)
verticalOffset: 5, (if the messagebox is larger (in height) than window's height. The messagebox's height is reduced to window height - 2 * verticalOffset)
width: 600,
height: 'auto', (height is automatically calculated by width)
closeButton: true, (show close button or not)
draggable: false, (make messagebox draggable)
customBtnClass: 'lobibox-btn lobibox-btn-default', (class for custom buttons)
modal: true,
debug: false,
buttonsAlign: 'center', (position where buttons should be aligned)
closeOnEsc: true, (close messagebox on Esc press)
delayToRemove: 200, (time after which lobibox will be removed after remove call. this option is for hide animation to finish)
delay: false, (time to remove lobibox after shown)
baseClass: 'animated-super-fast', (base class to add all messageboxes)
showClass: 'zoomIn', (show animation class)
hideClass: 'zoomOut', (hide animation class)
iconSource: 'bootstrap', ("bootstrap" or "fontAwesome" the library which will be used for icons)

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 basic examples using Lobibox Messageboxes in an XPages application.

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 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 Messageboxes part is used in an XPages application the lobibox.js file can be replaced by the messageboxes.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="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button2}" ).bind("click",function(){Lobibox.alert('error', {
title: 'Error',
height: 'auto',
buttonsAlign: 'center',
modal: true,                 
closeButton: true,               
draggable: true,
showClass: 'zoomIn',
msg: "Lobibox Messageboxes Alert Plugin in XPages ?",
});
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result are responsive and highly customizable messageboxes 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.confirm({
height: 'auto',                   
closeButton: true,               
draggable: true,
msg: "Using the Lobibox Messageboxes Plugin in XPages ?"
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button2}" ).bind("click",function(){Lobibox.alert('error', {
title: 'Error',
height: 'auto',
buttonsAlign: 'center',
modal: true,                 
closeButton: true,               
draggable: true,
showClass: 'zoomIn',
msg: "Lobibox Messageboxes Alert Plugin in XPages ?",
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button3}" ).bind("click",function(){Lobibox.prompt('text', {
title: 'Please enter username',
//Attributes of <input>
attrs: {
placeholder: "Username"
}
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock4">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button4}" ).bind("click",function(){Lobibox.progress({
title: 'Please wait',
label: 'Uploading files...',
progressTpl : '<div class="progress lobibox-progress-outer">\n\
<div class="progress-bar progress-bar-danger progress-bar-striped lobibox-progress-element" data-role="progress-text" role="progressbar"></div>\n\
</div>',
onShow: function ($this) {
var i = 0;
var inter = setInterval(function () {
window.console.log(i);
if (i > 100) {
inter = clearInterval(inter);
}
i = i + 0.1;
$this.setProgress(i);
}, 10);
}
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock5">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button5}" ).bind("click",function(){Lobibox.window({
title: 'Window title',
height: 'auto',
buttonsAlign: 'center',
modal: true,                 
closeButton: true,               
draggable: true,
content: '...'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:button id="button1" value="CONFIRM" styleClass="btn-default"></xp:button>
<xp:button id="button2" value="ALERT" styleClass="btn-info"></xp:button>
<xp:button id="button3" value="PROMPT" styleClass="btn-success"></xp:button>
<xp:button id="button4" value="PROGRESS" styleClass="btn-danger"></xp:button>
<xp:button id="button5" value="WINDOW" styleClass="btn-warning"></xp:button>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

For more information: Documentation and examples Lobibox Messageboxes

No comments:

Post a Comment