Tuesday, 16 September 2014

Using Select2 in XPages (Part I)

Using Select2 in XPages including Bootstrap
Select2 converts a regular (XPage) combobox control into a Select2 (Bootstrap) one by adding a few lines of JavaScript.

In this blogpost it is assumed that the Bootstrap4Xpages plugin from OpenNTF is not being used.
In a next post I will describe how this can also be done with the Bootstrap4XPages plugin from OpenNTF.

1. Download Select2 and add the files to the XPages Application
You can download Select2 from this site : http://ivaynberg.github.io/select2/







The files must be added in the WebContent Folder (Package Explorer).












2. Include select2.min.js and select2.css on your XPage.
The file / stylesheet select2.css and the file select2.min.js needs to be included on the XPage or, for example, in an Application Theme.










3.  Javascript Library
Last step is adding a few lines of Javascript Library to convert the combo box.
In this example I used Mark Roden's excellent x$() snippet and put it in a Script Library.
I included the Script Library on the XPage.







4. Using the Select2
On the XPage create a Combo Box.













Add this scripblock to the XPage.











Result:




1 comment: