Hi,

Within the last couple of weeks I have been busy implementing a first Watson AI powered product implementation at a customer site using a Domino/Xpages based frontend. The Watson part of this application will be something to talk about later on but I wanted to take the chance to blog about a couple of frontend components and plugins for the Xpages part, that I found truly handy along the way. This will be a series of blog posts in the next couple of weeks but each post will be independent from each other.

Some basics – all I am talking about is using Bootstrap and jQuery as the base for the frontend component. I also use a bootstrap theme for the application so I will not cover overly much of the CSS parts of the application besides the CSS parts of the specific plugin.


Also, the application de-couples frontend and backend data by using beans in the Xpages world and to use JSON micro services to get to the requested data in the backend.


Let’s start out with a common problem in a form – multi selection fields with a nice bootstrap interface, especially if you have to select from a large amount of options. I was looking for a plugin that allows search, multi selection and is so easy that it binds to a single HTML field.


I wanted to achieve something like this:

Image:My XPages Plugin Series - Part1: Dual Listbox



After looking around for some time I eventually came across the plugin named “Boostrap Dual Listbox” (source:
https://www.virtuosoft.eu/code/bootstrap-duallistbox/). It gives us something that looks similar to this:
Image:My XPages Plugin Series - Part1: Dual Listbox

So where do the selection options come from ? They are persisted in the back end Domino database as documents. A bean reads them (session scope bean) and returns a javascript list element that displays them. What does the code in the xpage look like ?


First, we have to load our plugin:



<xp:headTag tagName="script">

<xp:this.attributes>

<xp:parameter name="type" value="text/javascript" />

<xp:parameter name="src" value="
js/plugins/dualListbox/jquery.bootstrap-duallistbox.js" />
</xp:this.attributes>

</xp:headTag>



Note that we load this as a head tag to work around AMD loading issues with good’ole DOJO.
Also, we have to add the CSS:



<xp:styleSheet href="css/plugins/dualListbox/bootstrap-duallistbox.min.css"></xp:styleSheet>



Then, we need our field that will be using the plugin and save the data:


<xp:listBox id="listBox1" multiple="true"

styleClass="form-control dual_select" defaultValue=""

value="#{sessionScope.countries}">

<xp:eventHandler event="onchange"

submit="true" refreshMode="partial" refreshId="listBox1">

</xp:eventHandler>

<xp:selectItems>

<xp:this.value><![CDATA[#{
javascript:var liste = UserBean.getKeyWordList();
return liste;}]]></xp:this.value>

</xp:selectItems>

</xp:listBox>



The key value connection is the style information “dual_select”. The “form-control” style defines an input field inside the Bootstrap theme.


Also, we need a Output Script to enable the plugin:



<xp:scriptBlock id="scriptBlock1">

<xp:this.value><![CDATA[$(document).ready(function(){

$('.dual_select').bootstrapDualListbox({

selectorMinimalHeight: 160,

preserveSelectionOnMove: 'moved',

moveOnSelect: false

});


});

]]></xp:this.value>

</xp:scriptBlock>



And that’s basically it. There is a small caveat – I do not bind the result to a bean property as I have to convert the data structures here, that’s why I bind the selection to a session scope variable. This get’s set in the afterPageLoad() Event in the xpage from the bean and in the form submit button, the session Scope variable gets read out and sent to the bean:


try {

var result = $U.toArray(sessionScope.get("countries"));

var v:java.util.Vector = new java.util.Vector();


var arrayLength = result.length;

for (var i = 0; i < arrayLength; i++) {


//Do something

v.add(result[i]);

}


UserBean.setKeyWords(v);

UserBean.save();

} catch (e) {

print(e);

}

sessionScope.put("Mode","0");

context.reloadPage();


W
hy did I do this ? Well, the Xpages Listbox is a real beast when it comes to return values. If you do not select anything, it will return a null value as expected. If you select one item, it will return a String, if you select multiple options, it will return an array. So we have to normalize this for our bean to pick up the data correctly. There might be a better way to do this and probably someone came up with a more sophisticated solution. Anywho – it works for now.

So overall no big deal to get this up and running – the bean delivers an array of select items.


Have fun with this one – I really like the filter options and the in and out switches to quickly find and select items from a potentially long list.


That’s it !


Cheers,


Heiko.
Heiko Voigt   |   18 October 2017 23:42:25   |    domino  xpages  bootstrap    |  
  |   Next Document   |   Previous Document

Comments (0)