Friday, 27 October 2017

Create Responsive Dual Listboxes in XPages Using the Bootstrap Dual Listbox Plugin


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 multiple select 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.

Options
When calling $("#element").bootstrapDualListbox() you can pass parameter objects with zero or more of the following options.
bootstrap2Compatible (false: set this to true if you want graphic compatibility with Bootstrap 2)
filterTextClear ('show all': the text for the "Show All" button)
filterPlaceHolder ('Filter': the placeholder for the input element for filtering elements)
moveSelectedLabel ('Move selected': the label for the "Move Selected" button)
moveAllLabel ('Move all': the label for the "Move All" button)
removeSelectedLabel ('Remove selected': the label for the "Remove Selected" button)
removeAllLabel ('Remove all': the label for the "Remove All" button)
moveOnSelect (true: determines whether to move options upon selection)
preserveSelectionOnMove (false: can be 'all' for selecting both moved elements and the already selected ones in the target list or 'moved' for selecting moved elements only)
selectedListLabel (false: can be a string specifying the name of the selected list)
nonSelectedListLabel (false: can be a string specifying the name of the non selected list)
helperSelectNamePostfix ('_helper': The added selects will have the same name as the original one, concatenated with this string and 1 for the non selected list, e.g. element_helper1 or 2 for the selected list, e.g. element_helper2).
selectorMinimalHeight (100: represents the minimal height of the generated dual listbox)
showFilterInputs (true: whether to show filter inputs)
nonSelectedFilter ('': initializes the dual listbox with a filter for the non selected elements. This is applied only if showFilterInputs is set to true)
selectedFilter ('': initializes the dual listbox with a filter for the selected elements. This is applied only if showFilterInputs is set to true)
infoText ('Showing all {0}': determines which string format to use when all options are visible. Set this to false to hide this information. Remember to insert the {0} placeholder)
infoTextFiltered ('<span class="label label-warning">Filtered</span> {0} from {1}': determines which element format to use when some element is filtered. Remember to insert the {0} and {1} placeholders)
infoTextEmpty ('Empty list': determines the string to use when there are no options in the list)
filterOnValues (false: set this to true to filter the options according to their values and not their HTML contents)

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.
Below a basic examples using Bootstrap Dual Listbox 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 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" />

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 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. In this example I use a few standard 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>

Final Result
The final result is a responsive Bootstrap Dual List Box in XPages 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="/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