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 🙂