203 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
Replay Webinar IBM JUMP Session: IBM Cloud Email Statistics
Fri, Nov 17th 2017 101
IBM Traveler 9.0.1.20 Available for Download on IBM Fix Central including Technote Support Feature Pack 10
Wed, Nov 15th 2017 149
Quick Tip: Read Text File - Compare View Values - Send Email Using LotusScript
Wed, Nov 15th 2017 68
Update Readers and Authors Fields Using LotusScript - Adding New Values
Tue, Nov 14th 2017 23
A Brief Reprieve - IBM Champion Nomination Period Extended
Mon, Nov 13th 2017 24
Replay Webinar IBM JUMP Session: IBM Domino Applications on Cloud
Sun, Nov 12th 2017 20
My IBM Champion Nominations for IBM Collaboration Solutions - Only a Few Days Left!
Thu, Nov 9th 2017 9
Top 10
IBM Traveler 9.0.1.20 Available for Download on IBM Fix Central including Technote Support Feature Pack 10
Wed, Nov 15th 2017 149
Replay Webinar IBM JUMP Session: IBM Cloud Email Statistics
Fri, Nov 17th 2017 101
Quick Tip: Read Text File - Compare View Values - Send Email Using LotusScript
Wed, Nov 15th 2017 68
IBM Domino and IBM Notes 9.0.1 FP7 available for download on IBM Fix Central
Tue, Sep 13th 2016 25
A Brief Reprieve - IBM Champion Nomination Period Extended
Mon, Nov 13th 2017 24
Update Readers and Authors Fields Using LotusScript - Adding New Values
Tue, Nov 14th 2017 23
Using Bootstrap Dual Listbox a Responsive Dual Listbox Widget in XPages
Wed, Oct 12th 2016 21
Replay Webinar IBM JUMP Session: IBM Domino Applications on Cloud
Sun, Nov 12th 2017 20
Using iziToast an Elegant, Responsive, Flexible and Lightweight Notification Plugin in XPages
Fri, Jul 21st 2017 16
Using the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages
Wed, Jun 3rd 2015 15


Responsive and Highly Customizable Messageboxes in XPages Using the jQuery Lobibox Plugin
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
   


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

---------------------
http://xpagesandmore.blogspot.com/2017/11/responsive-and-highly-customizable.html
Nov 07, 2017
12 hits



Recent Blog Posts
101
Replay Webinar IBM JUMP Session: IBM Cloud Email Statistics
Fri, Nov 17th 2017 7:23a   Johnny Oldenburger
On November 15 there was a very interesting IBM Jump Session, IBM Cloud Email Statistics. JUMP stands for Join, Understand, Master and Participate. The presentation, audio and video are now available on the IBM Support website. Content IBM Cloud Email Statistics is a SaaS offering, providing customers with a variety of data insights on the long term use of their IBM Cloud eMail services (IBM Verse, SCN) through an intuitive graphical dashboard. In this session you will be introduced to the offe
149
IBM Traveler 9.0.1.20 Available for Download on IBM Fix Central including Technote Support Feature Pack 10
Wed, Nov 15th 2017 6:05p   Johnny Oldenburger
Today IBM released IBM Traveler 9.0.1.20. IBM Traveler 9.0.1.20 is a maintenance release that provides new features and APAR fixes for the IBM Traveler server. The information below outlines the changes included. IBM Traveler 9.0.1.20 does not include a database schema update. However, if upgrading from a version prior to 9.0.1.15 and running MS SQL Server, or if upgrading from a version prior to 9.0.1.16 and running DB2 Server, action may be required if you manually manage your database schema
68
Quick Tip: Read Text File - Compare View Values - Send Email Using LotusScript
Wed, Nov 15th 2017 4:19p   Johnny Oldenburger
Today I was asked if it was possible using LotusScript to read a Text File, which was stored in a specific Folder on the system, subsequently perform a check, based on the Values in the Text File, or a Value in the Text File is present in a specific View in the NSF and finally place the found Values in a Folder in the NSF and send an email with the found Values in the Folder to a specific email address. The above can be solved easily by using LotusScript. Agent Read Text File To solve the above
23
Update Readers and Authors Fields Using LotusScript - Adding New Values
Tue, Nov 14th 2017 6:31a   Johnny Oldenburger
During the past months I have worked a lot with LotusScript. One of the questions I came accross was how to add a value to a Readers or Authors field in the UI document using LotusScript. First a little background information. In daily practice, I make extensive use of Userroles in the Access Control List which are assigned to specific User Groups in the Access Control List. Based on these Userroles document access is granted based on these Userroles in the Authors and Readers Fields in the spec
24
A Brief Reprieve - IBM Champion Nomination Period Extended
Mon, Nov 13th 2017 12:49p   Johnny Oldenburger
The period for the nominations for IBM Champion has been extended until 30 November! This is great news. The extension offers everyone the opportunity to submit their nominations for which the original deadline was too short. For me, this means that I can submit two more nominations for which I had no time left. Just great! Thanks for this opportunity. Read the blog post by Libby Ingrassia for more information. See also my previous blog post, Become an IBM Champion - My Thoughts And Consideratio
20
Replay Webinar IBM JUMP Session: IBM Domino Applications on Cloud
Sun, Nov 12th 2017 12:37p   Johnny Oldenburger
On November 8 there was a very interesting IBM Jump Session, IBM Domino Applications on Cloud. JUMP stands for Join, Understand, Master and Participate. The presentation, audio and video are now available on the IBM Support website. Content IBM Domino Applications on Cloud is a subscription service that offers IBM hosted solution for Domino Apps over IBM Bluemix Cloud. The service offers a structured and planned migration process, avoiding business disruptions. In this session you will be intro
9
My IBM Champion Nominations for IBM Collaboration Solutions - Only a Few Days Left!
Thu, Nov 9th 2017 2:57p   Johnny Oldenburger
This week is the final week to nominate, among others, an IBM Champion for IBM Collaboration Solutions (ICS). In this blog post I will not give a complete summary of my IBM Champion nominations but only of those who have made, in my opinion, a 'significant contribution' to the community during the past year. As I mentioned in my previous blog post, Become an IBM Champion - My Thoughts And Considerations, it was not as easy as the last few years. This year I looked and interpreted the terms to
11
Comparing, Replacing and Restoring Design Elements with Local History using the Text Compare Editor in Domino Designer
Thu, Nov 9th 2017 10:37a   Johnny Oldenburger
Last week something went completely wrong with some resources (design elements) in a modified design of an XPages application. Luckily Domino Designer has a very powerful feature, Local History. A standard Eclipse functionality of extremely great value. By using the Compare, Replace and Restore Resources functions with Local History using the Text Compare Editor the problems were quickly resolved. Below is a brief description of this very powerful feature in the Domino Designer. A local edit hi
9
Webinar - IBM JUMP Session: IBM Domino Applications on Cloud
Tue, Nov 7th 2017 12:57p   Johnny Oldenburger
There will be a very interesting IBM Jump Session on 8 November, IBM Domino Applications on Cloud. JUMP stands for Join, Understand, Master and Participate. Content Topic: IBM Domino Applications on Cloud Date: Wednesday, November 8, 2017 Time: 10:00 AM EST (15:00 UTC/GMT, UTC-5 hours) for 60 minutes IBM Domino Applications on Cloud is a subscription service that offers IBM hosted solution for Domino Apps over IBM Bluemix Cloud. The service offers a structured and planned migration process, av
12
Responsive and Highly Customizable Messageboxes in XPages Using the jQuery Lobibox Plugin
Tue, Nov 7th 2017 12:56p   Johnny Oldenburger
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 L




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition