Wednesday, 12 August 2015

Bootstrap in XPages: Limiting the number of selections in Select2 fields

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. This blog post is a continuation of a previous blog post about Select2, Migrating to Select2 version 4.0.0. including a simple AMD Loader Fix in XPages.
For a recent project it was required that for certain Select2 fields users only should be able to make a limited selection. In this specific case only two values should be able to be selected from a selection list. Select2 multi-value select boxes (List Box) can set restrictions regarding the maximum number of options selected. The example below is declared with the maxSelectionLength in the Select2 Options. For more information about Select2 please read my related blog posts.

Related Blog Posts
Migrating to Select2 version 4.0.0. including a simple AMD Loader Fix in XPages
Using Select2 in XPages (Part I)
Using Select2 in XPages (Part II)
Select2 Placeholder Combo Box

Using the Select2 Option maxSelectionLength
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).select2({
placeholder: "Select a software category",
allowClear: true,      
maximumSelectionLength: 2
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

The final result is a limited selection,


Code Custom Control
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="select2v4/js/select2.js"></script>
<link rel="stylesheet" href="select2v4/css/select2.css" />
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).select2({
placeholder: "Select a category",
allowClear: true
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).select2({
placeholder: "Select a software category",
allowClear: true,      
maximumSelectionLength: 2
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:panel>
<div class="page-header">
<h1>Select2 - Version 4.0.0<xp:span style="color:rgb(255,255,255)">.</xp:span>
<small>Combo Box / List Box</small></h1>
</div>
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
Select2 - Combo Box
<xp:comboBox id="comboBox1"
value="#{document1.Categories}" style="width: 100% !important;">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var arr = new Array("");    
var res = @DbLookup("", "byKeyWord", "Category", 2);
var list = arr.concat(res);
return list;}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</div>
<div class="panel-footer">Combo Box - Single Value</div>
</div>
</div>
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
Select2 - List Box
<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>
<div class="panel-footer"></div>
</div>
</div>
</xp:panel>
</xp:view>

No comments:

Post a Comment