Wednesday, 12 October 2016

Using Bootstrap Dual Listbox a Responsive Dual Listbox Widget in XPages

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


No comments:

Post a Comment