Friday, 15 May 2015

Using a Bootstrap Multiselect List Box in XPages

In my current XPages project I was looking for a more Bootstrap 'like' multi-select List Box. In my search I came across the Bootstrap Multiselect jQuery plugin. Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown with a dropdown menu containing the single options as checkboxes.

To use the Multiselect plugin the files bootstrap-multiselect.js and bootstrap-multiselect.css need to be added to the XPage / Custom Control. In this basic example, I downloaded the Multiselect files and added the files to the WebContent folder in the Package Explorer.


<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="bootstrapmultiselect/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="bootstrapmultiselect/css/bootstrap-multiselect.css" type="text/css" />

Next I added a List Box to the Custom Control / XPage and set the multiple attribute to get a real multiselect Bootstrap List Box.

<xp:listBox id="listBox1" multiple="true" value="#{document1.Software}">
<xp:this.attrs><xp:attr name="multiple" value="multiple"></xp:attr></xp:this.attrs>
<xp:selectItem itemLabel="Notes Domino 9" itemValue="Notes Domino 9"></xp:selectItem>
<xp:selectItem itemLabel="XPages" itemValue="XPages"></xp:selectItem>
<xp:selectItem itemLabel="Bootstrap" itemValue="Bootstrap"></xp:selectItem>
<xp:selectItem itemLabel="jQuery" itemValue="jQuery"></xp:selectItem>
</xp:listBox>

Furthermore I needed 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. You can add the XSnippet 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}" ).multiselect();
    });
  ]]></xp:this.value>
</xp:scriptBlock>

The result is  a good looking responsive Bootstrap Multiselect List Box.


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">
<!-- Include the plugin's CSS and JS: -->
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="bootstrapmultiselect/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="bootstrapmultiselect/css/bootstrap-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">
<xp:br></xp:br>
<div class="col-sm-2">Multiselect List Box</div>
<div class="col-sm-6">
<xp:listBox id="listBox1"
value="#{document1.Software}">
<xp:this.attrs>
<xp:attr name="multiple" value="multiple"></xp:attr>
</xp:this.attrs>
<xp:selectItem itemLabel="Notes Domino 9"
itemValue="Notes Domino 9">
</xp:selectItem>
<xp:selectItem itemLabel="XPages"
itemValue="XPages">
</xp:selectItem>
<xp:selectItem itemLabel="Bootstrap"
itemValue="Bootstrap">
</xp:selectItem>
<xp:selectItem itemLabel="jQuery"
itemValue="jQuery">
</xp:selectItem>
</xp:listBox>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

There are many configuration options. For a complete overview and download, I refer to the documentation.

1 comment: