Wednesday, 30 March 2016

Bootstrap Plugins in XPages Part I - Bootstrap-select A jQuery plugin that utilizes Bootstrap's dropdown.js

In this new series, 'Bootstrap Plugins in XPages' I will show several plugins that can be used in XPages for ultimate usability. All plugins will be made available in a demo database. Besides the well known Bootstrap plugins attention will also be paid to lesser known Bootstrap plugins which are very worthwhile. I start this new series with a lesser known Bootstrap plugin, Bootstrap-select.

Bootstrap Plugins in XPages
Part I : Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js

Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to normal select boxes.Bootstrap-select is an alternative for Select2. Bootstrap-select is easy to implement, has many options and events and is definitely worth having a look at. In this blog post I will give an example of how Bootstrap-select can be used in XPages. Bootstrap-select can be downloaded from GitHub.

1. 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 'bootstrapselect' has been added in the WebContent Folder.


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

<script type="text/javascript" src="bootstrapselect/js/bootstrap-select.js"></script>
<link rel="stylesheet" href="bootstrapselect/css/bootstrap-select.css" type="text/css" />

2. Adding the x$ jQuery selector for XPages
Furthermore I use the the great XSnippet by Mark Roden (again), x$ jQuery selector for XPages, to initialize the plugin and include it on the Custom Control / XPage. The XSnippet can be added to the Script Libraries.

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

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).selectpicker({
style: 'btn-info',
size: 4,
title: 'Choose one of the following...'
});
});
]]></xp:this.value>
</xp:scriptBlock>

3.AMD Loader Fix
Finally, the JavaScript file bootstrap-select.js needs to be adjusted. Reason: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. The source code of the library can be adjusted in a very simple way with just a slight modification.

1. Go to the WebContent Folder and select the JavaScript file select2.js
2. Select Open With - Client/Server JS Editor


3. Remove in the second line define.amd and replace it with false


4. Save the JavaScript file bootstrap-select.js

4. Setup List Box
The data-api will automatically theme the List Box with the class 'selectpicker'.

<div class="col-md-7">
<div class="selectpicker">
<xp:listBox id="listBox1" multiple="true">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
</div>
</div>

The final result is a bootstrap look and feel List Box in XPages.


5. Setup Combo Box
The data-api will also automatically theme the Combo Box with the class 'selectpicker'.

<div class="col-md-7">
<div class="selectpicker">
<xp:comboBox id="comboBox1">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</div>
</div>


6. 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 type="text/javascript""src="bootstrapselect/js/bootstrap-select.js"></script>
<link rel="stylesheet" href="bootstrapselect/css/bootstrap-select.css" type="text/css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).selectpicker({
style: 'btn-info',
size: 4,
title: 'Choose one of the following...'
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).selectpicker({
style: 'btn-success',
size: 4,
title: 'Select an option...'
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h2>Bootstrap Select</h2>
<h4>Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to
style and bring additional functionality to normal select boxes.</h4><xp:br></xp:br>
<div class="col-md-7">
<div class="selectpicker">
<xp:listBox id="listBox1" multiple="true">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
</div>
</div>
<xp:br></xp:br>
<div class="col-md-7">
<div class="selectpicker">
<xp:comboBox id="comboBox1">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

For more information and examples : Bootstrap-select

No comments:

Post a Comment