XPages and Me

My Journey into XPages Development

Diving into Bootstrap and Font Awesome – Part 7: select2 and Value / Tag Not in List

When using combo boxes / list boxes, we sometimes have to give users the ability to add / enter values, that are not part of the predefined value list.

When developing applications for the Notes Client, all we had to do was to just tick the box “Allow values not in list”. Yes, those were simpler times indeed.

As you know, we don’t have that option with XPages and had to come up with our own solutions for that.

With select2, however, you can do it. Though before the 4.0.0 version, it was rather cumbersome (not going into details here). But with the latest version, it is as easy as adding a data- attribute to your combo box / list box, which that’s really all you have to do. And here is, how:

Make sure, you are using the latest version of select2. Select your combo box, open the “All Properties” tab and find the category “basics”. Add a new attribute under “attrs”, with the name “data-tags” and the value “true”:

Image 1

And you are all set, now your users can enter values, that are not in the list.

How great is that?

Unfortunately, this comes with a caveat: Once you do a partial refresh of the area, that contains the combo box, the value is gone (because it wasn’t part of the initial value list). But don’t fear, there is a solution for that. All you have to do, is to make sure that the newly entered value is added to the list of values during the partial refresh. So, how do you do that?

Lets say, you have a button that does something and then does a partial refresh of the panel, that contains the combo box. All you’d have to do here, is to set a sessionScope variable with the value of combo box.

Then, add a formula item to the value list, which will then read the value of the sessionScope variable and add it to the list of values.

The other issue you might run into, if you use Brad Balassaitis’ solution for adding a onChange event to your combo box / list box. As this is solely client-side JavaScript, you can’t set a sessionScope variable. You can, however, set a param value and then read that value in your formula item.

Here is the XML markup of an XPages that contains simple examples for both scenarios.

Please Note: This example doesn’t contain any functionality to make sure that the value list contains only unique values. That would be something you’d have to include obviously.Also, in the example below, I am using Frank van der Linden’s OpenNTF XSnippet getComponentValue to read the value of the combo box and set the sessionScope variable.

<?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="frmSYSTestForm">
		</xp:dominoDocument>
	</xp:this.data>
	<xp:this.resources>
		<xp:script src="/SYS.SSJSUtilities.jss" clientSide="false">
		</xp:script>
	</xp:this.resources>
	<xp:panel id="pnlTest">
		<xp:scriptBlock id="scrToolTip">
			<xp:this.value><![CDATA[$(document).ready(function(){ $("[data-toggle=select2]").select2(); $("[data-toggle=select2]").on("change", function(e) { XSP.partialRefreshPost("#{id:pnlTest}",{ params: {'sValue': x$("#{id:comboBox1}").val()} }); }); });]]></xp:this.value>
		</xp:scriptBlock>
		<xp:comboBox id="comboBox1" value="#{document1.iTxtTest}">
			<xp:this.attrs>
				<xp:attr name="data-toggle" value="select2">
				</xp:attr>
				<xp:attr name="data-tags" value="true">
				</xp:attr>
			</xp:this.attrs>
			<xp:selectItems>
				<xp:this.value><![CDATA[#{javascript:return '';}]]></xp:this.value>
			</xp:selectItems>
			<xp:selectItem itemValue="Value1" itemLabel="Value1">
			</xp:selectItem>
			<xp:selectItem itemValue="Value2" itemLabel="Value2">
			</xp:selectItem>
			<xp:selectItem itemValue="Value3" itemLabel="Value3">
			</xp:selectItem>
			<xp:selectItems>
				<xp:this.value><![CDATA[#{javascript:sessionScope.sValue}]]></xp:this.value>
			</xp:selectItems>
			<xp:selectItems>
				<xp:this.value><![CDATA[#{javascript:param.sValue}]]></xp:this.value>
			</xp:selectItems>
		</xp:comboBox>
	</xp:panel>
	<xp:button value="Test" id="button1">
		<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="pnlTest" disableValidators="true" immediate="false" save="false">
			<xp:this.action><![CDATA[#{javascript:sessionScope.sValue = getComponentValue('comboBox1');}]]></xp:this.action>
		</xp:eventHandler>
	</xp:button>
</xp:view>
Advertisements

One response to “Diving into Bootstrap and Font Awesome – Part 7: select2 and Value / Tag Not in List

  1. Brad Balassaitis March 30, 2015 at 11:44 pm

    If you want to set a scope variable from client-side JavaScript, you can make a call to a JSON RPC method to make it happen. It runs asynchronously, so it performs well and does not block the page while it runs. If you need that to be set before your proceed with your refresh, then you can trigger the refresh in the RPC method callback and use XSP.partialRefreshGet() on the target element.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: