Thursday, 18 September 2014

Using Select2 in XPages (Part II)

In a previous blog post I described how Select2 can be used in an XPages application with Bootstrap included.
In that situation, it was assumed that the OpenNTF Bootstrap4XPages plugin was not installed.
In this blog post I will show you how you can use Select2 with the OpenNTF Bootstrap4XPages plugin.

1. OpenNTF Bootstrap4XPages plugin
The Bootstrap4XPages plugin provides the Twitter Bootstrap rendering technology to XPages.
The goal of this plugin is to enable this new rendering through a dedicated theme, without having to change the application pages. All you have to do is to set the application theme, for example, to 'bootstrapv3.2.0', in Domino Designer.
The theme covers all the regular XPages controls, as well as the ones delivered as part of the extension library and generally rendered using OneUI (application layout, data view...).

Download the OpenNTF Bootstrap4XPages Project from the
OpenNTF website : OpenNTF Bootstrap4XPages

2. Installation Bootstrap4Xpages plugin
The Bootstrap4XPages plugin must be installed on the Domino Server and Domino Designer.

A. Server
The preferred method to install the plugin on the Domino Server is through an Update Site database.










In case the Update Site path is not yet added to the notes.ini file add the following line:
OSGI_HTTP_DYNAMIC_BUNDLES=updatesite.nsf

B. Domino Designer
To install the plugin in the Domino Designer select File - Application - Install and import the updatesite.


























3. Enable Bootstrap4XPages in the XPages Application
To use the Bootstrap4XPages plugin in an XPages Application enable the plugin / library in the XPages Properties.








Set the Application Theme to bootstrapv3.2.0.













Now the Bootstrap4XPages plugin is enabled in the XPages Application.

- Create a new Application Layout
- Select Bootstrap Application Configuration as Configuration in the layout.































- Some properties can now be set in the Bootstrap Layout (see example below)






















4. Select2
In the Bootstrap4XPages plugin Select2 is upgraded to 3.4.6.
Select2 converts a regular (XPage) combobox control into a Select2 Bootstrap one.
There is no need to add the Select2 files to the Web-Content Folder in this situation.
They are already build-in!

Create a new XPage
  • Add the Application (Bootstrap) Layout to the XPage.
  • Add a Combo Box and a List Box to the XPage in a Panel Control.
  • Now add the Select2 Picker for Combo / List Box (form the Bootstrap4XPages plugin / library) to the Combo Box and List Box in the Panel Control.



















The XPages should look similar to the example below.





























Sample Code for the Combo Box and List Box

<xp:comboBox id="comboBox1value="#{document1.Categories}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:@DbLookup("", "byKeyWord", "Category", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
<bx:select2PickerCombo
id="select2PickerCombo2"
allowClearing="true" for="comboBox1"
placeHolder="Select a category">
</bx:select2PickerCombo>

<xp:listBox id="listBox1"value="#{document1.Categories}" multiple="true">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
<bx:select2PickerCombo
id="select2PickerCombo1"
allowClearing="true" for="listBox1"
placeHolder="Select a software category">
</bx:select2PickerCombo>


The final result



















Sample code XPage

<?xml version="1.0" encoding="UTF-8"?>
xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:bx="http://www.openntf.org/xsp/bootstrap" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:panel>
<div class="page-header">
<h1>
Select2
<xp:span style="color:rgb(255,255,255)">.</xp:span>
<small>Combo Box / List Box</small>
</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - Combo Box
<xp:comboBox id="comboBox1"
value="#{document1.Categories}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:@DbLookup("", "byKeyWord", "Category", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
<bx:select2PickerCombo id="select2PickerCombo2"
allowClearing="true" for="comboBox1"
placeHolder="Select a category">
</bx:select2PickerCombo>
</div>
<div class="panel-footer">Combo Box - Single Value</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - List Box
<xp:listBox id="listBox1"
value="#{document1.Categories}" multiple="true">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
<bx:select2PickerCombo id="select2PickerCombo1"
allowClearing="true" for="listBox1"
placeHolder="Select a software category">
</bx:select2PickerCombo>
</div>
<div class="panel-footer">List Box - Multiple Values</div>
</div>
</xp:panel>
</xp:view>


For more information see the Bootstrap4XPages website by Mark Leussink:  Website Bootstrap4XPages and the Webinar Bootstrap4XPages.

No comments:

Post a Comment