Friday, 6 May 2016

Bootstrap Plugins in XPages Part VII - MagicSuggest A Highly Configurable jQuery Plugin For Auto-suggest Combo- and List Boxes

In this blog post I will show how the MagicSuggest plugin can be used in XPages. MagicSuggest provides a multiple selection Combo Box built for bootstrap themes. MagicSuggest can also be defined as a highly configurable jQuery plugin for Auto-suggest combo- and list boxes with a bootstrap theme. Although the plugin is no longer actively maintained it remains still interesting for combo- and list boxes with large selection options.

Bootstrap Plugins in XPages
Part I : Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js
Part II : Bootstrap FileStyle - Customization of input file for Bootstrap
Part III : Dialog Boxes using Bootbox
Part IV : Awesome Bootstrap Checkbox
Part V : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes
Part VI : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2)
Part VII : MagicSuggest A Multiple Selection Combobox

Below a description of the setup of the MagicSuggest plugin. MagicSuggest 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. Next the JavaScript and CSS files, magicsuggest.js and magicsuggest.css, must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<link rel="stylesheet" href="ms/magicsuggest.css" />
<script src="ms/magicsuggest.js"></script>

2. Adding the x$ jQuery selector for XPages
Furthermore I use in this example the the great XSnippet by Mark Roden, 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 Combo Box.

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).magicSuggest({
placeholder: "Select a category"
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

3. Setup Combo Box
A basic setup of a Combo Box with a data-attribute.

<div class="col-md-7">
<xp:comboBox id="comboBox1">
<xp:this.attrs>
<xp:attr name="multiple" value="true"></xp:attr>
</xp:this.attrs>
<xp:selectItem itemLabel="Notes Client 9" itemValue="Notes Client 9"></xp:selectItem>
<xp:selectItem itemLabel="Domino 9" itemValue="Domino 9"></xp:selectItem>
<xp:selectItem itemLabel="Administrator 9" itemValue="Administrator 9"></xp:selectItem>
<xp:selectItem itemLabel="Designer 9" itemValue="Designer 9"></xp:selectItem>
</xp:comboBox>
</div>

The final result is a bootstrap look and feel Multiple Selection Combo Box in XPages.


4. Setup List Box
The MagicSuggest plugin also works for a List Box.

<div class="col-md-7">
<xp:listBox id="listBox1"
value="#{document1.Categories}" style="width: 100% !important;">
<xp:this.attrs>
<xp:attr name="multiple" value="multiple"></xp:attr>
</xp:this.attrs>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript: @DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
</div>


More information : MagicSuggest A Multiple Selection Combobox

5. Code XPages (GitHub Gist)
<?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>
<link rel="stylesheet" href="ms/magicsuggest.css" />
<script src="ms/magicsuggest.js"></script>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
 $(document).ready(
 function() {
 x$( "#{id:comboBox1}" ).magicSuggest({
 placeholder: "Select a category"          
 });
 }
 );
 ]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).magicSuggest({
placeholder: "Select a category"          
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="col-md-7">
<xp:comboBox id="comboBox1">
<xp:this.attrs>
<xp:attr name="multiple" value="true"></xp:attr>
</xp:this.attrs>
<xp:selectItem itemLabel="Notes Client 9" itemValue="Notes Client 9"></xp:selectItem>
<xp:selectItem itemLabel="Domino 9" itemValue="Domino 9"></xp:selectItem>
<xp:selectItem itemLabel="Administrator 9" itemValue="Administrator 9"></xp:selectItem>
<xp:selectItem itemLabel="Designer 9" itemValue="Designer 9"></xp:selectItem>
</xp:comboBox>
</div>
<xp:br></xp:br><xp:br></xp:br>
<div class="col-md-7">
<xp:listBox id="listBox1"
value="#{document1.Categories}" style="width: 100% !important;">
<xp:this.attrs>
<xp:attr name="multiple" value="multiple"></xp:attr>
</xp:this.attrs>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript: @DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

No comments:

Post a Comment