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.


Using XControls for developing cards-based UI for mobile and desktop applications


For a project I reviewed several frameworks to deliver a web interface. Among them was XControls which is a project on OpenNTF. XControls promises to deliver:

  • Faster design and assembly of modern user interfaces, using Card & List objects.
  • Easy the auto-optimization for smartphones, tablets and PCs.


XControls is built with Bootstrap and the Bootcards project.


Bootcards is a cards-based UI and it is built on top of Bootstrap. Unlike most other UI frameworks, it includes a dual-pane interface for tablet users.

The documentation describes well the structure and options for the two main objects, card and list (analagous to Forms and Views in traditional Notes development).

Basically you have 2 types of list:

  • Normal.
  • Detailed.

Below is an example of the Detailed list:


And 8 types of cards:

  • Base.
  • Form.
  • Table.
  • Chart.
  • Summary.
  • Media.
  • File.
  • Rich text.

Below is an example of the Media card:



Bootstrap claims to be the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. We will not introduce this framework further.

Getting started with XControls

Part of the documentation for XControls is the Getting started page which will walk you through creating a new application using XControls. I suggest to read this first and keep the primer documentation side by side.

Download the files

The required files can be either downloaded from OpenNTF or Github. Unfortunately XControls is not available as a plugin for your XPages development so you need to copy the required files manually in your existing project/NSF or you can use the provided NTF as a starter-kit for a new project.  The files are:

  • All custom controls starting with UnpBoot naming.
  • All Xpages starting with Unp naming.
  • All Resources\Files.
  • The”blank” theme (set this as application theme in XSP Properties file).

After that you are ready to develop the UI for your application! A recommended tip is to install the sampler application provided with the OpenNTF download and open that one in a browser and Domino Designer.

Test: Notebook/Journal

For my review I decided to apply the XControls methodology on a simple existing Notes application: the Notebook. This application allows you store simple documents which can combine rich text and file attachments. You are also able to ‘tag’ these documents by applying categories.

I will describe the steps taken to apply the XControls cards-based UI to this application.

Step: Copy the required files

The documentation does not describe to copy the unpCommon server-side javascript library.

Step: Create XPage unpMain

When creating an application, if it is going to be used on Teamstudio Unplugged mobile devices then we recommend that the home XPage is called UnpMain. Otherwise you are free to name your XPage.

Step: Add UnpBootResources

Every XPage that will be opened by the end-user needs the UnpBootResources custom control added. This adds CSS, JavaScript and Server Side JavaScript to your application.


Step: Create a common application layout

To provide a common application layout the Common Header and Common Footer custom controls should be included in the XPages that are accessible by the end-user.

Common Header

In case you want the app to develop for Mobile and Desktop then add a UnpBootNavigator and UnpBootHeader.

  • UnpBootNavigator: for mobile (the so-called ‘hamburger’ menu).
  • UnpBootHeader for desktop.

Also define the navitems in UnpBootHeader.

<unp:UnpBootHeader title=”${javascript:return @DbTitle()}”>
{label: “All Entries”, hasSubMenu: false, page: “/UnpMain.xsp”, icon: “fa-database”},
{label: “By Category”, hasSubMenu: false, page: “/vwCategory.xsp”, icon: “fa-list”},
{label: “By Entry Date”, hasSubMenu: false, page: “/vwEntryDate.xsp”, icon: “fa-calendar”},
{label: “Trash”, hasSubMenu: false, page: “/vwTrash.xsp”, icon: “fa-trash-o”}


{label: “All Entries”, hasSubMenu: false, page: “/UnpMain.xsp”, icon: “fa-database”},
{label: “By Category”, hasSubMenu: false, page: “/vwCategory.xsp”, icon: “fa-list”},
{label: “By Entry Date”, hasSubMenu: false, page: “/vwEntryDate.xsp”, icon: “fa-calendar”},
{label: “Trash”, hasSubMenu: false, page: “/vwTrash.xsp”, icon: “fa-trash-o”}


Font Awesome

Font Awesome gives you scalable vector icons that can instantly be customized – size, color, drop shadow, and anything that can be done with the power of CSS. XControls supports Font Awesome icons everywhere.

As you can see in the code above Font Awesome is for example used in the common header.

Common Footer

In case you want to include synch (for when running on Unplugged) add the UnpBootFooter as the common footer. You can also apply tabs in the footer if desired.

<unp:UnpBootFooter synctype=”none”>
{label: “Google”, hasSubMenu: false, page: “;, icon: “fa-google”},
{label: “Like us”, hasSubMenu: false, page: “;, icon: “fa-facebook”}



Best practice tip

Since you will place the application layout just created across multiple XPages it is wise to store them in re-usable custom controls e.g. commonheader and commonfooter.

Step: Create the first content list

In the navigation we have declared that the initial XPage shall contain the All Entries overview. This overview simply lists the documents in a flat structure. You can use the UnpBootFlatView custom control for this.

Apply wrappers

To layout the content according to the bootcards definition apply a wrapper for the content:

<div id=”main” class=”container bootcards-container”>
<div class=”row fullheightrow”>
<!– add your list –>
<div id=”doccontent” class=”col-sm-7 bootcards-cards hidden-xs”>
<!– add your initial content e.g. a card–>

In the dual pane UI the target for dropping card content will be the div with ID doccontent.

Apply a list

<unp:UnpBootFlatView viewname=”($All)” summarycolumn=”$52″
numberofrows=”20″ newlink=”entry.xsp” xpagedoc=”UnpMain.xsp”
title=”All Entries” ajaxload=”Yes”>

A description for all the available properties for the UnpBootFlatview can be read here: link. Property xpagedoc defines the xpage to load documents with, by default this would be the same as the current XPage.

Below is the result (only 2 documents in the database at the moment):



Below is the result when clicking on the Add link:


The XPage entry.xsp will be opened in a dialog. For now entry.xsp contains an unconfigured Form Editor custom control only. As you can see this requires more work.



Apply a Form Viewer

A Form Viewer is a wrapper that allows you to display document data inside a card. I created a custom control named docviewer and placed a UnpBootFormViewer inside it and configured it as followed:

<unp:UnpBootFormViewer editxpagewithajax=”yes”
formname=”JournalEntry” title=”Notebook Entry”
titleiconfield=”thumbnail” showbuttons=”true”
<unp:this.footertext><![CDATA[#{javascript:var id = context.getUrlParameter(“documentId”);
if (id != “”){
var doc:NotesDocument = database.getDocumentByUNID(id);
if (doc !=null){
var date = doc.getLastModified();
return “Last modified: ” + date
<xp:this.rendered><![CDATA[#{javascript:context.getUrlParameter(“documentId”) != “”}]]></xp:this.rendered>
<xp:panel id=”list-group” xp:key=”facet_1″ styleClass=”panel”>
<div class=”list-group”>
<div class=”list-group-item”>
<xp:text id=”subject” tagName=”h4″ styleClass=”list-group-item-heading”>
<div class=”list-group-item”>
<xp:label value=”Category” id=”lblCategory” for=”category”></xp:label>
<xp:text tagName=”h4″ id=”category” value=”#{docview.Categories}” styleClass=”list-group-item-heading”></xp:text>
<div class=”list-group-item”>
<xp:label value=”Date” id=”lblDate” for=”date”></xp:label>
<xp:text tagName=”h4″ id=”date” value=”#{docview.DiaryDate}” styleClass=”list-group-item-heading”></xp:text>
<div class=”list-group-item”>
<xp:label value=”Content” id=”lblCnt” for=”content”></xp:label>
<xp:text tagName=”h4″ id=”content” value=”#{docview.Body}” styleClass=”list-group-item-heading” escape=”false”></xp:text>

Again the entry.xsp is set to offer the document in edit mode (in a dialog). It appears that docview is the representation of the document. If you want to use data from the document outside the facet e.g. in the card footer you seem not to be able to refer to docview.

Below is an example of a selected document from the list:


If you select Edit the document is presented in a dialog via XPage entry.xsp which is still empty. Let’s work on that one right now!

Apply a Form Editor

A Form Editor is a wrapper into which you can insert form fields for creating and editing documents. Fields can include auto clearing, type ahead, date pickers, numbers and rich text.

Below is the code that I included in the Xpage entry.xsp which is shown in dialog boxes when editing or creating a new document:

<unp:UnpBootFormEditor showbuttons=”true”
viewxpagename=”UnpMain.xsp” title=”Entry” formname=”JournalEntry”
footertext=”You can use your Notebook as a diary, to store meeting minutes or status reports, or simply as a place to create and store draft documents until they are ready for publication.”>
<xp:panel xp:key=”facet_1″ id=”list-group”>
<div class=”form-group”>
<xp:label styleClass=”col-xs-4 control-label” for=”subject” value=”Subject”></xp:label>
<div class=”col-xs-8″>
<xp:inputText id=”subject” value=”#{docedit.subject}” styleClass=”form-control required”>
<xp:attr name=”placeholder” value=”Subject”></xp:attr>
<a href=”” class=”bootcards-clearinput”>
<i class=”fa fa-lg fa-times-circle”></i>
<div class=”form-group”>
<xp:label value=”Date” id=”datetime_dairydatelabel” for=”dairydate”
styleClass=”col-xs-4 control-label”>
<div class=”col-xs-8″>
<xp:inputText id=”dairydate”
<xp:attr name=”datevalue”>
var date:lotus.domino.local.DateTime = docedit.getItemValueDateTime(‘DiaryDate’);
return date.toJavaDate().getTime();
return new Date().getTime();
<xp:convertDateTime type=”date”

<div class=”form-group”>
<xp:label styleClass=”col-xs-4 control-label” for=”Categories” value=”Category”></xp:label>
<div class=”col-xs-8″>
<xp:inputText id=”Categories” value=”#{docedit.Categories}” styleClass=”form-control required”>
<xp:attr name=”placeholder” value=”Category”></xp:attr>
<a href=”” class=”bootcards-clearinput”>
<i class=”fa fa-lg fa-times-circle”></i>
<div class=”form-group”>
<xp:label value=”Content” id=”biolabel” for=”content” styleClass=”col-xs-4 control-label”>
<div class=”col-xs-8″>
<unp:UnpBootRichTextEditor fieldname=”Body”></unp:UnpBootRichTextEditor>


  • For the viewxpagename property I have chosen the UnpMain.xsp Xpage, this is the XPage to open after saving the document. Normally this would be the same as the current XPage.
  • The date field is bound to a date-picker.
  • For the rich text field I included a UnpBootRichTextEditor custom control. This will give the field some edit options.

Below is an example of the result. As you can see I did not at so many bells & whistles to the form editor (yet) to improve usability:


Step: Create the categorized content list

Can you imagine a Notes application without a categorized view? Probably not. In XControls you seem to have 2 options:

  • A flat list.
  • An accordion list.

A flat list for categorization, really? If you bind the UnpBootFlatView custom control to a categorized view as in the example below, the categorized view will be displayed as a flat list, but with documents/entries grouped in the provided categories:

<unp:UnpBootFlatView title=”Entries By Category”
summarycolumn=”$52″ viewname=”By Category” numberofrows=”20″
ajaxload=”Yes” detailcolumn=”$44″ xpagedoc=”vwCategory.xsp”
newlink=”entry.xsp” footertext=”A Flat List but with Categories :-?”>

Below is an example of the result:


Accordion list

However, if you want to apply a collapsible Notes-a-like feature, you can choose the UnpBootAccordion custom control to provide an Accordion list.

<unp:UnpBootAccordionView title=”Dates” summarycolumn=”$39″
viewname=”By Diary Date” expandfirstcategory=”no” ajaxload=”Yes”
loaddocumenttarget=”doccontent” detailcolumn=”$44″
xpagedoc=”vwEntryDate.xsp” newdatatarget=”#editModal”
<unp:this.footertext><![CDATA[#{javascript:var date = @Date(@Today());
return “Today is: ” + date.toDateString()}]]></unp:this.footertext>

Below is an example of the result:


The ‘categories’ are collapsible. Note that I had to modify the column value for the date: @Text(DiaryDate).



So far my initial review took. It seems fair enough to say that XControls enables you to deliver a dual pane cards-based UI for your Notes application without too much amount of development time.

I did explore many other features the framework offers (calendaring, carousels, charts) but it is definitely an OpenNTF project to keep an eye on. Especially if you are not capable of running a full blown solution like Worklight or you want to test early feedback for delivering existing Notes applications to mobile devices.

Presentations from EntwicklerCamp 2014 – Track 3

Track Session Subject Download Presentation
Track3 Session1 LotusScript Best-Practices (“keep it simple”)$FILE/T3S1-Lotusscript.pdf
Track3 Session2 Java Beans sind kompliziert? Nicht die Bohne!$FILE/T3S2-JavaBeans.pdf
Track3 Session3 OpenNTF – Die neue Applikationen and Controls für 2014$FILE/T3S3-openNTF.pdf
Track3 Session4+5 All things X – 180 Minuten Session$FILE/T3S4+5-All-Things-X.pdf
Track3 Session6 Applikationsentwicklung mit XPages und IBM Connections$FILE/T3S6-Entwicklung-Xpages-Connections.pdf
Track3 Session7 DOTS – reloaded$FILE/T3S7-DOTS_reloaded.pdf
Track3 Session8 JavaScript für Fortgeschrittene$FILE/T3S8-JavaScript%20f%C3%BCr%20Fortgeschrittene.pdf

Demo of the Single Page Application Wizard control

You can bring a IBM Notes application without much work to the web browser via the Notes Browser plugin. But since Mobile is the standard nowadays that plugin seems to be obsolete almost. So what other options do you have for your enterprise apps?

  • You can introduce a mobile application platform, if you have the time and the money.
  • You can migrate your whole collaboration platform in exchange for something less, similar or not similar at all. And prey for mobile tools on that platform.
  • You can rewrite your apps and deliver them with the help of frameworks as mobile web application or in between solution.

Or… you save yourself the time & bucks and install the Extension Library version that contains the Single Page Application wizard from OpenNTF.

I have made a video in which I demonstrate how to mobilize the fakenames application in a couple of minutes. First I will describe the wizard and how the process for mobilizing an app looks like. Then I demonstrate the actual development which will take about 8 1/2 minutes.

Update – watch on Vimeo

Video on Vimeo: in case you experience the message ‘This video is not available in your country’.


Enjoy the video!

In case you want to contact me on mobilizing your Notes app, just send me an email.


Adding search to an application with XPages interface (quickly)

For a project I was asked to deliver a new user interface for the web browser with the help of XPages. This included a search functionality.

First step: Look on OpenNTF

OpenNTF is a great resource to check if someone has done development before and has made the code available for public.

Here are some results that offer some form of search out of the box:

  • Advanced Search XPage Control (link)
  • Xpages Multi Database Search Custom Control (link)
  • Xpage Search And Tagcloud control (link)
  • XPages Basic Search (link)

I decided to go for the Advanced Search control. In case I have missed a great project on OpenNTF that provides a good search please drop a line in the comments.

Step 2: Modification

The Advanced Search control did not use any fancy from the extension library. So instead of the viewPanel control I decided to use the dataView control, plus the tooltip control to reduce the initial amount of text on the screen. Then I added some pagers from the extension library control again and voila here is the result:


So my search is ready in a couple of hours. Who says XPages is not rapid application development?

Thank you

A big thank you to all those who contributed their work to OpenNTF!

Single Page Application tutorial

After watching the video on YouTube on the Single Page Application wizard I became curious and decided to take a test and mobilize an application myself. I choose the infamous “fake names” application for this.

I have written a blog article/tutorial about it. Here you can read it: ‘Single Page Application Wizard‘.


With the Single Page Application control you can rapidly mobilize a Notes application. The wizard is intuitive although you need to understand some basics of mobile development.

Unfortunately the wizard is not complete and forces you to apply some coding.

Infinite Scroll

The infiniteScroll property for a Data View control is enabled by default in the Singe Page Application. This great new feature allows users to fetch new rows of data by scrolling down the list.

You are almost stupid if you disable this feature.


  • Ability to apply basic CRUD Tab Bar Buttons to a Document Viewer Application Page.
  • On a Document Viewer page it would be easier to add fields instead of removing most of all the fields that would otherwise be applied by default. In mobile apps the number of fields you want to display is probably less than in a Notes client application.
  • Ability to re-open the wizard after you have pressed ‘Finish’.
  • It would be great to have message popups when a user performs an action that he/she is not allowed to do. At the current stage there is default no mechanism for this. Examples: “You are not authorized to perform this action”, “You have insufficient access rights”.




Using Bootstrap in XPages – The ultimate incomplete guide

This document describes how to integrate the popular front-end framework Twitter Bootstrap with XPages. The purpose is to provide developers an introduction to use Twitter Bootstrap in XPages development projects by building an actual application.

Below you can find a document/manual I started to write a while ago but I never finished (I guess there is no finish since new boundaries are explored every day). At least the document should give you a head start with using ‘raw’ (Twitter) Bootstrap in XPages. I also recommend you to take a look at the Bootstrap4XPages project on OpenNTF since this project offers lots of ‘out of the box’ conversions of components from the Extension Library (e.g. data view control).

Bootstrap in XPages

Enjoy reading!