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 🙂

Get rid of “Infinity” as the result of a @DbColumn in a combobox – Quicktip

Who has not experienced the following:

XPages has a 32 or 64 ( can’t remember which ) limit for the lookup formula whereas in Notes the limit is only for the whole of the formula e.g. after @unique is applied.

It makes it very hard to have meaningful drop downs for filtering data.

Instead you can use SSJS e.g.:

var lookupView:NotesView = database.getView(“<LOOKUPVIEW>”);
lookupView.getColumnValues(0)

This is the equivalent to:

@DbColumn( “”,”<LOOKUPVIEW>”, 1 );

and returns you the full result without the limit.

But this also brings me to the following problem:

When I enable Select2 on a loooong combobox the list is populated the type-ahead / filtering works fine BUT when I select a value long down the list the response of the select2 combobox becomes really sloooow.

Does anyone has an approach to this?