Friday, 23 June 2017

Using Selectize for List Boxes and Combo Boxes in XPages

Selectize is the hybrid of a textbox and <select> box. It's jQuery based and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc. It clocks in at around 7kb (gzipped). The goal is to provide a solid & usable user-experience with a clean and powerful API. Selectize is a lot like Chosen, Select2, and Tags Input but with a few advantages.
In order to use Selectize, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Selectize.
Below a basic example how Selectize can be used in an XPages application. In the example below I also included Sifter, a library for textually searching arrays and hashes of objects by property (or multiple properties) designed specifically for autocomplete and Microplugin, a lightweight plugin / dependency system for libraries.

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 the Folders selectize, sifter and microplugin have been added in the WebContent Folder.


Next the JavaScript and CSS files, sifter/sifter.js, microplugin.js, selectize.js and selectize.bootstrap3.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="sifter/sifter.js"></script>
<script type="text/javascript" src="microplugin/microplugin.js"></script>
<link rel="stylesheet" href="selectize/css/selectize.bootstrap3.css" />
<script type="text/javascript" src="selectize/js/selectize.js"></script>

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. 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>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).selectize({
create: true,
sortField: 'text',
placeholder: "Select a product",
plugins: ['remove_button']
});
})
]]></xp:this.value>
</xp:scriptBlock>

AMD Loader Fix
Finally, all JavaScript files 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 specific JavaScript file
2. Select Open With - Client/Server JS Editor



3. Removed define.amd and replace it with false


4. Save the JavaScript file bootstrap-dialog.js

Note: There are other solutions for the AMD Fix. For more information about thes solution see my blog post Bootstrap Plugins in XPages Part VI - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2).

Final Result
The final result is a responsive Select Box with some additional options in the initial setup.


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">
<script type="text/javascript" src="sifter/sifter.js"></script>
<script type="text/javascript" src="microplugin/microplugin.js"></script>
<link rel="stylesheet" href="selectize/css/selectize.bootstrap3.css" />
<script type="text/javascript" src="selectize/js/selectize.js"></script>
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).selectize({
create: true,
sortField: 'text',
placeholder: "Select a key"
});
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).selectize({
create: true,
sortField: 'text',
placeholder: "Select a product",
plugins: ['remove_button']
});
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:comboBox id="comboBox1">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var arr = new Array(""); 
var res = @DbColumn("C1257C43:002CD36F", "($ChooseDepartment)", 1)
var list = arr.concat(res);
return list;
}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
<xp:br></xp:br>
<xp:listBox id="listBox1" multiple="true">
<xp:selectItem itemLabel=""
itemValue=""></xp:selectItem>
<xp:selectItem itemLabel="Notes Client"
itemValue="Notes Client"></xp:selectItem>
<xp:selectItem itemLabel="Notes Designer"
itemValue="Notes Designer"></xp:selectItem>
<xp:selectItem itemLabel="Notes Administrator"
itemValue="Notes Administrator"></xp:selectItem>
</xp:listBox>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

For more information: Documentation Selectize

No comments:

Post a Comment