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 54
IBM Traveler 9.0.1.20 Available for Download on IBM Fix Central including Technote Support Feature Pack 10
Wed, Nov 15th 2017 160
Quick Tip: Read Text File - Compare View Values - Send Email Using LotusScript
Wed, Nov 15th 2017 73
Update Readers and Authors Fields Using LotusScript - Adding New Values
Tue, Nov 14th 2017 159
A Brief Reprieve - IBM Champion Nomination Period Extended
Mon, Nov 13th 2017 89
Replay Webinar IBM JUMP Session: IBM Domino Applications on Cloud
Sun, Nov 12th 2017 169
My IBM Champion Nominations for IBM Collaboration Solutions - Only a Few Days Left!
Thu, Nov 9th 2017 56
Top 10
Replay Webinar IBM JUMP Session: IBM Domino Applications on Cloud
Sun, Nov 12th 2017 169
IBM Traveler 9.0.1.20 Available for Download on IBM Fix Central including Technote Support Feature Pack 10
Wed, Nov 15th 2017 160
Update Readers and Authors Fields Using LotusScript - Adding New Values
Tue, Nov 14th 2017 159
A Brief Reprieve - IBM Champion Nomination Period Extended
Mon, Nov 13th 2017 89
Quick Tip: Read Text File - Compare View Values - Send Email Using LotusScript
Wed, Nov 15th 2017 73
My IBM Champion Nominations for IBM Collaboration Solutions - Only a Few Days Left!
Thu, Nov 9th 2017 56
Replay Webinar IBM JUMP Session: IBM Cloud Email Statistics
Fri, Nov 17th 2017 54
Comparing, Replacing and Restoring Design Elements with Local History using the Text Compare Editor in Domino Designer
Thu, Nov 9th 2017 45
Webinar - IBM JUMP Session: IBM Domino Applications on Cloud
Tue, Nov 7th 2017 23
Responsive and Highly Customizable Messageboxes in XPages Using the jQuery Lobibox Plugin
Tue, Nov 7th 2017 23


Using Bootstrap Dual Listbox a Responsive Dual Listbox Widget in XPages
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
   

Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices. The dual listbox is created from a select multiple by calling .bootstrapDualListbox(settings); on a selector. The selector can be any element, not just selects. When the method is called on a selector other than a select, then all select childrens are converted into dual list boxes.
In order to use Bootstrap Dual Listbox the JavaScript and CSS file(s) need to be included on the XPage or Custom Control. The latest version can be downloaded from GitHub: Bootstrap Dual Listbox.

1. Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In the example below a Folder duallistbox has been added in the WebContent Folder.


Next the JavaScript and CSS files, jquery.bootstrap-duallistbox.js and bootstrap-duallistbox.css must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<script src="duallistbox/jquery.bootstrap-duallistbox.min.js"></script>
<link rel="stylesheet" type="text/css" href="duallistbox/bootstrap-duallistbox.css" />

2. Adding the x$ jQuery selector for XPages
Furthermore I 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. In this example the name of the Script Library is JQueryXSnippet.js.

<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>

The script itself can be made up as follows. The name of the id in the script must correspond with the id of the List Box. In the example below I used some extra options.

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).bootstrapDualListbox({
nonSelectedListLabel: 'Non-selected',
selectedListLabel: 'Selected',
preserveSelectionOnMove: 'moved',
moveOnSelect: false
});
});
]]></xp:this.value>
</xp:scriptBlock>

The final result is a responsive Bootstrap Dual List Box in XPages.


3. 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="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script src="duallistbox/jquery.bootstrap-duallistbox.min.js"></script>
<link rel="stylesheet" type="text/css" href="duallistbox/bootstrap-duallistbox.css" />
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).bootstrapDualListbox({
nonSelectedListLabel: 'Non-selected',
selectedListLabel: 'Selected',
preserveSelectionOnMove: 'moved',
moveOnSelect: false
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h3>Bootstrap Dual Listbox</h3>
<h4>Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.</h4>
<xp:listBox id="listBox1" multiple="true">
<xp:selectItem itemLabel="Blue" itemValue="Blue"></xp:selectItem>
<xp:selectItem itemLabel="Green" itemValue="Green"></xp:selectItem>
<xp:selectItem itemLabel="Red" itemValue="Red"></xp:selectItem>
<xp:selectItem itemLabel="Orange" itemValue="Organe"></xp:selectItem>
<xp:selectItem itemLabel="Yellow" itemValue="Yellow"></xp:selectItem>
</xp:listBox>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Bootstrap Dual List Box




---------------------
http://xpagesandmore.blogspot.com/2016/10/using-bootstrap-dual-listbox-responsive.html
Oct 12, 2016
21 hits



Recent Blog Posts
54
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
160
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
73
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
159
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
89
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
169
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
56
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
45
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
23
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
23
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