Sunday, 20 September 2015

Bootstrap in XPages: Introducing Popupmultiselect - A Multiselect List Box with Options using a Modal Window based on Bootstrap

A few months ago I wrote a blog post about the Bootstrap Multiselect jQuery plugin, Using a Bootstrap Multiselect List Box in XPages. For a recent project I was looking for a Multiselect Listbox, but not as a dropdown menu but as a popup in a modal window. In this quest I found Popupmultiselect, a pop-up with options which allows multiselect and is based on Bootstrap. In this blog post I will show how Popupmultiselect can be used in XPages.

Setup in XPages
A. Adding the JS and CSS files
In order to use Popupmultiselect, the JavaScript and CSS file needs to be included on the XPage or Custom Control. The latest version can be downloaded from GitHub: Popupmultiselect. In this example a Folder popupmultiselect has been added in the WebContent Folder in the Package Explorer.


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

<script type="text/javascript" src="popupmultiselect/js/multiselect.js"></script>
<link rel="stylesheet" href="popupmultiselect/css/multiselect.css" type="text/css" />

B. 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. The script itself can be made up as follows.

xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).multiselect();
});
]]></xp:this.value>
</xp:scriptBlock>

C. Setup List Box in XPages
The basic setup of the List Box is as follows.

<xp:listBox id="listBox1" multiple="true">
<xp:selectItem itemLabel="IBM Notes" itemValue="IBM Notes"></xp:selectItem>
<xp:selectItem itemLabel="IBM Domino Designer" itemValue="IBM Domino Designer">
</xp:selectItem>
<xp:selectItem itemLabel="IBM Domino Administrator" itemValue="IBM Domino Administrator">
</xp:selectItem>
<xp:selectItem itemLabel="IBM Notes Minder" itemValue="IBM Notes Minder"></xp:selectItem>
</xp:listBox>

D. Final result in XPages
The final result is a responsive Multiselect List Box with Options using a Modal Window based on Bootstrap.


E. 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="popupmultiselect/js/multiselect.js"></script>
<link rel="stylesheet" href="popupmultiselect/css/multiselect.css" type="text/css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
 $(document).ready(
 function() {
 x$( "#{id:listBox1}" ).multiselect();
 });
 ]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="col-sm-6">
<h2>Popupmultiselect</h2>
<h3>A Multiselect List Box with Options using a Modal Window</h3>
<xp:br></xp:br>
<xp:listBox id="listBox1" multiple="true">
<xp:selectItem itemLabel="IBM Notes" itemValue="IBM Notes"></xp:selectItem>
<xp:selectItem itemLabel="IBM Domino Designer" itemValue="IBM Domino Designer">
</xp:selectItem>
<xp:selectItem itemLabel="IBM Domino Administrator" itemValue="IBM Domino Administrator">
</xp:selectItem>
<xp:selectItem itemLabel="IBM Notes Minder" itemValue="IBM Notes Minder"></xp:selectItem>
</xp:listBox>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In the next blog post more about the Options and Events of the Popupmultiselect plugin.

No comments:

Post a Comment