Getting the Select2-to-Tree working in XPages

In a modernization project (increase browser compatibility) I needed a more simple solution for a custom value picker. The less design elements the merrier 🙂

Another highly desired feature was to have a search function within the picker because there are a lot of values to choose from.

So my initial though was to present the options in a listbox and wrap the select2 plugin around it. Well it turned out the customer found the categorization of options a need to have, including collapse and expand options (who has not grown up with twisties?).

Next attempt was to implement the Select2-to-tree plugin since it presents a hierarchy of links in a select2 object

Looks familiar like a Notes view right? Luckily my Notes view only got one level of categorization and my skills with transforming Notes view data into other objects came in handy. So in a short time I have my data providing REST service setup .

Here is the initiation script for the plugin:

Then I tried to send the selected value to the server to check the value but I was not able to. The XPage did not send a message but the page just frooze.

So to avoid to spend a lot of time on finding and fixing the bug I decided to run the alternative route and use SELECT element instead of the xp:listBox and write the value from csjs to the server via a RPC service (hence the change listener)

<select
	id="lbTest1"
	multiple="true"
	class="form-control">
</select>

The RPC service has nothing special, just setting a viewScope variable:

So that is basically it. With a minimum of design elements / coding I got my Notes view data in a treeview presented in a select2 component:

One item to be removed from my back-log. Happy development 🙂

3 thoughts on “Getting the Select2-to-Tree working in XPages

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s