You got a ToDo !

Let’s start with the correction: Everybody gets a ToDo!


With the first wave of community posts on Bluemix where everybody is getting a ToDo application, the questions arise.

I guess IBM developerWorks Answers site is the most official place to drop your questions so it is wise to keep on eye on that channel.

From a business perspective I am not sure how usable Bluemix will be initially. The additional services, overview of costs, warning signs etc. are welcome but most of my applications are bundled or make use of other applications (e.g. profiles, files, organizational structure, email for workflow).

Ofcourse I would like to hear what your business cases are.

For now, I just get started, understand the overview, build my first xpages app on bluemix and enjoy my ToDo app.


Making my Domino development environment a bit more shiny

Fix Pack 4

Recently IBM announced the Fix Pack 4 release for IBM Notes/Domino. When checking my version of Domino I noticed I was a bit behind and it was time to polish my Domino development environment a bit.

For an ex-administrator / main developer I think it is good practice to keep your (latent) administrator knowledge up to date so you can provide yourself the best possible development conditions (an Domino administrator for Developer dummies whitepaper available somewhere?).

My updates

So this is what I did:

  • Installed the Fix Packs (tip)
  • Started the Server Controller (reference)(tip)
  • Installed some plugins for my browser (Postman)
  • Set up Directory Assistance (reference)
  • Set up to run some tasks/agents scheduled via a Program document (example)
  • Customized the login form with a Bootstrap UI (example)
  • And last but not least updated some plugins from OpenNTF (serve yourself)

With this I am a bit more up to date for the next x-months.


I guess your development environment is state of the art and better than mine. That is why I would like to hear how your environment looks like or the suggestions you have.

Like a mentioned before, I am not aware if there is some kind of whitepaper available for developers who like to setup a Domino development environment, or a Domino Administration guide for dummies. I once heard a good man talking about such initiative but I wonder if that ever came to light?

Administration became fancy?

Since when became Domino Administration fancy I wondered after visiting this site? Nevertheless a great initiative.

Adding a Dojo tooltip to your XPages valuepicker

Here is a simple usability tip.

In some corporate organizations not all members are acquainted with modern, modest UI. For those an icon does not always tell them that an action lies underneath it.

For example the value picker from the Extension Library offers you a nice magnifier icon out of the box (which you can set to a custom icon in case desired). If you want to help your senior colleague that there lies no danger beneath clicking that icon you could provide an alternative tooltip for it.

Here is some sample code how you could do this:

<section class=”container”>
<div class=”row”>
<div class=”col-sm-1″><label for=”exampleInputName2″>Name</label></div>
<div class=”col-sm-2″><xp:inputText id=”inputText1″></xp:inputText></div>
<div class=”col-sm-9″>
<span id=”valuePickerTooltip”>
<xe:valuePicker id=”valuePicker1″ for=”inputText1″>
<xe:dominoViewValuePicker databaseName=”FakeNames40K.nsf”
<xe:tooltip id=”tooltip1″ for=”valuePickerTooltip”
label=”Pick a Person from the Address Book” position=”after”>
<div class=”row”>
<div class=”col-sm-9 col-sm-offset-1″><button type=”submit” class=”btn btn-primary”>Send invitation</button>

As a result the user will be presented something as followed when hovering over that icon:


Detect touch gestures with Hammer – Improvement for scrolling


In a previous post I introduced the Hammer library as a tool to detect touch gestures in your Mobile XPage Application (MXA?).

Add touch gestures to your page.


In the sample I demonstrated the Pan gesture. But beside Pan you have other recognizers:

The downsize with the Pan recognizer is that there is no velocity detection like in the swipe recognizer. This makes the pan recognizer less “natural”.

Angle detection and scrolling

When users scroll on their mobile devices the angle in which they scroll is never 100% vertical or horizontal. Your thumb tends to go from left bottom to right top.

So in order to avoid the swipe recognizer kicks in unnecessary you can detect the angle the gesture makes. Here are the values for angles:

  • Values are between -180 and 180:
    • 0 means RIGHT
    • -90 means UP
    • 90 means DOWN
    • 180 means LEFT

If you decide to only perform an action on vertical gestures with a deviation of an angle of 15 degrees your altered code could like as followed:

var mc = new Hammer(main);
mc.get(“swipe“).set({ direction: Hammer.DIRECTION_ALL });
mc.on(“swipe”, function(eventObject) {
if(eventObject.angle > -15 && eventObject.angle < 15){
left: width-20, opacity:1}, options);
left: “0”}, options);
if(eventObject.angle > 165 || eventObject.angle < -165){
left: “0”, opacity:1}, options);
left: -(width-20)}, options);

In this approach the user can scroll without the opening/closing of the left side menu to kick in unnecessary.

Building a Live Search function with Domino Access Services & jQuery Tokeninput


A live search is a function where get search results returned while you type. In this post I will describe how you can add such a feature using the jQuery Tokeninput plugin and perform a full text search with Domino Access Services (DAS)as your data provider.

But first let’s take a look at how the end result looks like:


As in other examples we will apply the live search to the infamous fakenames application. You can grab this directory application from Codestore.

Step 1 – Download the resources and add them to your XPage

Add the following resources to a custom control:

Step 2 – Add the filter and search field

In the result screenshot you noticed the following elements:

  • A filter (People, Groups, Holidays)
  • A search field (with typeahead).
  • A (formatted) result list.

Therefor add the following HTML on your custom control:

As you notice we will be using Bootstrap to make the appearance a bit more attractive.


The hidden input element search_param will be the container for our selected filter.  The following code will set the value:


The Tokeninput plugin will inject an (initially empty) unordered result list and input field in the livesearch-input input element.

Include a function to initiate the Tokeninput plugin:

Step 3 – Activate the plugin

In order to activate the Tokeninput plugin you need to include a script block control on your custom control and ad the following script:

function getObjType() {
var val = $(“#search_param”).val();
return val;

var restPrefix = “./api/data/collections/name/”
var hintText = “Enter text, use asterix(*) for Fulltext wildcards”;
var searchingText = “Searching…”;
var queryParam = “search”;
var propertyToSearch = “name”;
var searchDelay = 2000;
var minChars = 2;
var resultsLimit = 5; //not working??
var noResultsText = “No matches”;
var tokenLimit = 1;
var preventDuplicates = true;
var onAdd = function(item) {
var objType = getObjType();
var docID = item[‘@unid’];
var URL = “”;
switch (objType) {
case “Groups”:
URL = “Group.xsp?unid=” + docID;
case “Holidays”:
URL = “Holiday.xsp?unid=” + docID;
URL = “Person.xsp?unid=” + docID;
window.location = URL;
var resultsFormatter = function(item) {
var objType = getObjType();
switch (objType) {
case “Group”:
sub = “dummy group sub”;
case “Holiday”:
sub = “dummy Holiday sub”;
sub = “” + item.job;
if (sub == “”) {
sub = “No title available“;
if (sub.length > 30) sub = sub.substring(0, 30) + “…”;
var name =;
if (name.length > 30) name = name.substring(0, 30) + “…”;
var img = ‘‘;
var text = ‘

‘ + name + ‘

‘ + sub + ‘

return ‘

  • ‘ + ‘
    ‘ + img + text + ‘


function setPlaceHolder() {
$(“#token-input-livesearch-input”).attr(“placeholder”, “Enter text”);

function init() {
$(“#livesearch-input”).tokenInput(restPrefix + getObjType(), {
hintText: hintText,
searchingText: searchingText,
queryParam: queryParam,
propertyToSearch: propertyToSearch,
searchDelay: searchDelay,
minChars: minChars,
resultsLimit: resultsLimit,
noResultsText: noResultsText,
tokenLimit: tokenLimit,
onAdd: onAdd,
preventDuplicates: preventDuplicates,
resultsFormatter: resultsFormatter

function re_init(objType) {
$(“#livesearch-input”).tokenInput(restPrefix + getObjType(), {
hintText: hintText,
searchingText: searchingText,
queryParam: queryParam,
propertyToSearch: propertyToSearch,
searchDelay: searchDelay,
minChars: minChars,
resultsLimit: resultsLimit,
noResultsText: noResultsText,
tokenLimit: tokenLimit,
onAdd: onAdd,
preventDuplicates: preventDuplicates,
resultsFormatter: resultsFormatter

function submitSearch() {
//not required, overwritten by onAdd function.

As you see the Tokeinput plugin can be steered via diverse parameters. A clear description of the available options you can read here.

In our case we determine:

Data Provider

var restPrefix = “./api/data/collections/name/”

This defines we will be using Domino Access Services as data provider. We will use the names of the views People, Groups, Holidays which correspond with the options in our filter list.

Remember you need to enable DAS for the database AND the views.

onAdd = function(item)

The variable onAdd is a function that will be called when we select an item from the result list. We have set to allow only one item to be selected and the onAdd function will open a new window location with the corresponding object/document.

URL = “Person.xsp?unid=” + docID;
window.location = URL;

resultsFormatter = function(item)

This variable defines how the items in the collection provided by Domino Access Services will be presented in the UI. You can be as creative with it as you like. I choose for the option for an image, distinguished name and a sub-title e.g. the function for a person.


Are we done already? Yes we are! All the heavy lifting is done by the Tokeninput plugin and Domino Access Services.

Notice that Full Text search in Domino Access Services supports the usage of an asterix. Otherwise you get only results returned with an exact match.

firebugUse a plugin for your browser to check the URL call and response to DAS.

Some final thoughts

Do I found the live search feature useful?

– Yeah. Especially in mobile web applications you want to avoid that a user has to go back to home navigation each and every time. And with large data-sets infinite scrolling is a good option.

Do I find the Tokeninput plugin valuable?

– I find the plugin easy to understand but I noticed not all properties are implemented :-/  An example of something what I expected to be implemented is the number of returned results (fixed to max 10 items).

Can I recommend the plugin?

– In case you use Bootstrap applying a bootstrap theme meant mostly stripping the default style sheet. In case you use the Application Layout control from the Extension Library you will discover some problems:

  • When applying the live search in the search bar you get overlay with the Utility links.
  • When applying a filter option you get scrolling issues when opening the dropdown menu in the navbar section.
  • The result list can not be displayed direct under the search field due to the overlay of the navbar and it’s margins.

The consequence of these problems above made me decide to place the search bar in the main column section instead of the search bar and align it to the right via the pull-right class in Bootstrap. The result looks similar but I loose some white space. (perhaps the solution lies in understanding Bootstrap a bit more).

In case you can live with these conditions or restrictions I think you have an awesome desired feature!

Your turn!

What are your thoughts? In case you have provide a live search feature via some other plugin or custom code I am happy to hear from you.

I have uploaded a sample on Dropbox. I am happy to hear the improvements you have made.

Happy coding =)

Use Hammer JS to add touch gestures to your XPage


In a previous post I demonstrated how you can apply a side panel to your interface to provide additional navigation for your application using the Bootstrap UI.

Toggle versus Swipe

The solution was basically a form of toggle, initiated from an element in your UI. For demonstration purpose we choose to include a image (hamburger menu) in the navbar logo section. The downsize of that is that you get 2 similar icons if you include Utiliy links and a click does feel less intuitive than a swipe gesture on a mobile device. 701-one_finger_swipe So what are your options?


If you search after javascript libraries fo touch or swipe gestures you will find a dozen. One famous is jQuery Mobile. But on top in my result list appears Hammer JS. While testing library examples I had one condition: it should work well with the Application Layout control from the Extension Library with the responsive layout behaviour. As it turned out, Hammer is pretty easy to integrate with this control.

Step 1 – Download the library

AMD and Dojo

In my first setup I noticed that the Hammer object was not available in the DOM. Thanks to Per Hendrik Lausten I got a quick reply on StackOverflow with a suggested solution. It turns out that AMD loading in the Hammer library conflicts with Dojo in XPages. From other posts on StackOverflow this seems to be a known problem. If you compare the number of questions regarding jQuery compared with Dojo perhaps IBM should consider to ditch this library but hurrah for backward compatibility. So in our local Hammer library we disable the AMD loading as suggested:

//if (typeof define == TYPE_FUNCTION && define.amd) { // define(function() { // return Hammer; // }); //} else if (typeof module != ‘undefined’ && module.exports) { if (typeof module != ‘undefined’ && module.exports) { module.exports = Hammer; } else { window[exportName] = Hammer; }

Step 2 – Set up your HTML structure

In my example we have 1 side panel and 1 main content section. My structure looks as followed:


The panel simply contains a number of list items:

and with a bit of CSS results as followed: panel The CSS:

.navigation { list-style: none; background: #eee; width: 200px; height: 100%; position: fixed; top: 50px; right: 0; bottom: 0; left: -200px; z-index: 0; }

So our panel is 200 pixels wide but is set at left-position -200px so we do not see it on the screen. The top-position is set to 50px which ensures it does not appear under the sticky navbar.

Main section

The main content section contains my Application Layout control from the Extension Library. You can set it up as you like. I chose a sticky navbar on the top. I filled the main column with some text and Boostrap panels. main The CSS is as followed:

.site-wrap { min-width: 100%; min-height: 100%; background-color: #fff; position: relative; top: -50px; bottom: 100%; left: 0; z-index: 1; padding: 4em; }

Step 3 – Create a Hammer instance and apply event listeners

In a scriptblock control we setup a new instance of a Hammer object, bind it to our main element (containing the Application layout control) and set event listeners for pan, tap and press gestures.

var main = document.getElementById(‘content’); var nav = document.getElementById(‘navigator’); //new instance var mc = new Hammer(main); // listen to events… mc.on(“panright”, function(ev) { = “200px”; = “0px”; }); mc.on(“panleft tap press”, function(ev) { = “0px”; = “-200px”; });

All set… go!

This is basically all you need. Include the Hammer JS and stylesheet in your resources and preview the xsp file in a browser. This is how the screen would look like when initially opened: normal   And this is how it looks like when you made a gesture to the right: open

Device emulator

While testing multiple libraries I experienced unexpected behavior in different browsers. I suggest you use a device emulator to minimize disillusion when viewing (worse: presenting) the end-result.

Animation effect

The appearance of the side panel is now pretty direct. You can easily apply some animation via jQuery.

var options = { duration: 150, easing: ‘swing’ }; mc.on(“panright”, function(ev) { $(main).animate({ left: “200”, opacity:0.4}, options); $(nav).animate({ left: “0”}, options); }); mc.on(“panleft tap press”, function(ev) { $(main).animate({ left: “0”, opacity:1}, options); $(nav).animate({ left: “-200”}, options); });


You can find a download under the following link. The NSF contains the adapted Hammer library a CSS stylesheet, an XPage and a custom control. Feel free to try and modify it and send me the results ;-)

Using the language bean from XPages Toolkit for Internationalization


You have people who tend to tick around where they live and work and you have people who tend to switch location now and then. Especially in Europe which is divided into many countries with many different languages, somehow operating under one flague,  you are sometimes amazed that organizations have not fully adapted to the trend of “travelling” co-workers.

different langiages

If you are lucky an application is presented bilingual but in a lot of occasions an application is presented either in English (when that is the official language of communication) or in a native language where the application is initiated and being used.

But what if that cross-border European co-worker enters the work floor?


Internationalization refers to the process whereby you prepare your application for users from varied geographies. There are two parts to this:

The need for localization is obvious; a German user wants to see an application in German and a French user in French, and so on. Localization involves making different language versions of all the application’s user interface available and ensuring the correct strings are used based on user preferences.

Support in XPages

In the IBM Notes and Domino Application Development wiki you can learn about the support for internationalization in XPages.

In this post I will describe how you can use the language bean that is part of the XPages Toolkit available in OpenNTF.

Sample application

In this post we will build a simple XPages UI which looks as followed:


In a combo-box you get presented a list with available language options. And based upon your selection values will be collected from a set of property files.

I will include a dropbox link to the sample application.


First: download & install the library. Beside the library there is also a sample application which comes in handy to borrow code from.

Java classes

The following files you will need:


Property files

The property files contain the actual string values. The amount of files depends on the number of languages you want to support. In our case 4: English (default), Swedish, German and Dutch. There will be three types of files: general, contacts and keywords.  That makes 12 (4*3) in total.


Here is what the files could look like. First the general poperties file:

AppTitle=Language Bean
NotAvailable=Not Available
SwitchLanguage=Choose Your Language
Header=Demo Language Bean
SubHeader=Register A Person

Which becomes in Swedish:

AppTitle=Språk Böna
NotAvailable=Inte Tillgänglig
SwitchLanguage=Välj Ditt Språk
Header=Demo Språk Böna
SubHeader=Registrera En person

The contacts properties files:

LastName=Last Name
FirstName=First Name

In German:


And at last the keywords properties file:


Which becomes in Dutch:


The properties files are “registrered” in the language bean via the following method:

public List<String> getPropertyFileNames() {
List<String> propertyFileNames = new ArrayList<String>();
return propertyFileNames;

Layout custom control

My demo app contains 2 pages which demonstrates the 2 options you have with the toolkit: use the language bean or the toolkit @formula.

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”; xmlns:xe=””&gt;
<xe:applicationLayout id=”applicationLayout1″><xp:this.facets>
<xp:panel xp:key=”LeftColumn”>
<xe:navigator id=”navigator1″>
<xe:pageTreeNode page=”/bean.xsp”>
<xe:pageTreeNode page=”/formula.xsp”>
<xp:callback facetName=”facet_1″ id=”callback1″></xp:callback>
<xe:simpleResponsiveConfiguration navbarText=”Language Bean”
label=”Kwintessential Notes” title=”Visit My Site”>
label=”XPages Toolkit” title=”Visit Project on OpenNTF”>

Bean XPage

I will spare you the  complete code for the Bean page. Check the download if you want the complete code.  The principle is simple. You collect the value via the following pattern

xptI18NBean.getValue(“[properties file].[key]”)

That could become something like:


Switching language

In order to switch language a combobox control is presented with the following code:

<xp:comboBox id=”cbSwitchLanguage” defaultValue=”#{javascript:xptI18NBean.getCurrentLanguage()}”>
<xp:eventHandler event=”onchange” submit=”true” refreshMode=”complete”>
<![CDATA[#{javascript:var sv = getComponent(“cbSwitchLanguage”).getValue()
if(sv != null && sv != “”) {
var locSet:Locale = new Locale(sv);

Language options

The getAllLanguages method in the language bean “registers” the available language options:

public List<String> getAllLanguages() {
List<String> languages = new ArrayList<String>();
return languages;

That is basically it!

Formula XPage

This page differs from the Bean page in the way it accesses the property files. It uses a formula which is defined in the XPages Toolkit library.

The formula follows the following pattern:

@XPTLanguageValue(“[properties file].[keyword]”)

Which could become something like:



A sample application for download is available under the following URL.


I am curious what method you use to make your applications available in multiple languages. Please drop a line how you have solved it.

I found the language bean in the XPages Toolkit very intuitive and easy to use. At least in some cases it solves the problem nice and quickly so my thanks go out to it’s project members.