Carousel with dynamic content


For an application I needed a carousel to display images on the frontpage. Since we go “all-in” Bootstrap the “natural choice” would be the Carousel component from the Extension Library. Unfortunately that control currently only accepts “static” slideNodes so I had to come up with something similar.

In the beginning…

First I just took the sample code from W3schools how to setup a basic Bootstrap Carousel component.


Second I set up a Notes view that contains the data I need for my carousel. This view will be the source for an XPages Rest Service control (PDF alert) which I call after page load with an Ajax call using jQuery’s getJSON.



As you can see I update the Bootstrap sample code with the received result(s).

As a result I get the Carousel component from Bootstrap but now with ‘dynamic content’.


(for those who have never seen a Carousel)

The only complication I experienced was due to the fact that I separate the design from the data and accessing the data is easier in SSJS/Java then CSJS.

Here is the code: Link Dropbox

Happy development =)

Enforce HTTPS for my XPages

Sometimes it can be benefitial to enforce the https protocol. My use-case was that an XPages app was going to be opened from the mobile Connections app and just the HTTP protocol would case an additional login dialog to appear.

So the following SSJS code is what I came up with:

<xp:this.beforePageLoad><![CDATA[#{javascript:currURL = context.getUrl().getScheme();
if (currURL ==”http”){
var baseURL = context.getUrl().toString().toLowerCase();
safeURL = baseURL.replace(‘http’,’https’);

The code will check if the xpage is called with the http protocol, if so the same page is called but then with the https protocol enforced.

Since the application aggregates a lot of information from Notes views, which the application administrator can add, I also check if any URL’s with the http protocol are being displayed and transform them with the https protocol to reduce the first check:

<xp:eventHandler event=”onClientLoad” submit=”false”>
<xp:this.script><![CDATA[function toSSL() {
var current_host =;
var hosts = [‘’,’’,”’,current_host];
$.each( hosts, function( i, l ){
$(‘a[href*=”‘ + l +'”]’, ‘body’).each(function() {
var $a = $(this);
var href = $a.attr(‘href’);
if(href.indexOf(‘https’) == -1) {
var ssl = href.replace(‘http’, ‘https’);
$a.attr(‘href’, ssl);
$( document ).ready(function() {

“runtime optimized resources” in conjunction with font-awesome

Last week I posted a question on the XPages forum (shameless plug) since I had some problems getting the ‘run-time optimized resources’ xsp property to work in conjunction with font-awesome.  During development I loaded the FA style-sheet via a theme. After staging and enabling the xsp property the icons failed loading.

In this post I will describe my way to have them work together.

My first attempt came after reading the following suggestion on Stack Overflow. This unfortunately did not work for me. Pulling the files via a theme kept on failing. It seems that the resource aggregation messes things up when CSS and JS is added through a theme.

Next I tried to load the new CSS file with only the @font-face part in it via the Resources on an XPage but this only worked with a complete URL, so including the HTTP protocol, which is not desired.

My third approach was by inserting an external style-sheet e.g.:

<link rel=”stylesheet” type=”text/css” href=”font-awesome-4.2.0/css/font-awesome-fontFamily.css”/>

This worked remarkably well.

As a result I have downsized the number of requests for Javascript from 63 to 10 and for CSS from 10 to 3.

If you suggest another solution please drop a line in the comments.

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.


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.

Developing social applications with the Social Business Toolkit SDK


The Social Business Toolkit SDK (SBT SDK) is a set of libraries and code samples that you use for connecting to the IBM Social Platform. As a developer you can choose which web development skills fits you best: Java, (client side) JavaScript or XPages. Your social platform may reside in the cloud or on premise.

In this post I will give you guidelines and practical examples to get you started. I choose XPages as development environment.


In the document terms are thoroughly used:

Term Description
SBT Social Business Toolkit
SDK Software Development Kit
DDE Domino Designer on Eclipse
XPages XPages is a rapid web and mobile application development technology
OpenNTF Open Source Community for (IBM) Collaboration Solutions
OAuth Open standard for authorization
Managed Bean Java Beans representing system objects and resources
Endpoint Encapsulates the access to a service provider, like Connections or Sametime

Installation of the SDK


Before you can start with development in Domino Designer on Eclipse you need to install the SBT SDK. It can be downloaded from the following address: The files you need to work with the SBT SDK and Domino are located in folder ‘redist\domino’ in the downloaded ZIP file.

Extension Library

Another condition to be able to run the Social SDK within your XPages you need to have installed the Extension Library, available on OpenNTF: You need to have the library installed on both Domino server and DDE.

Installation for Domino Server

You can find a set of instructions how to install the SBT SDK on an IBM Domino server on the address: I recommend the installation via an Eclipse Update site. As a result your Update site should display the following plugins:



Installation for DDE

The Domino Designer deployment of the IBM Social SDK can use the same imported update site from the Update Site NSF. On Domino Designer verify that the checkbox for “Enable Eclipse plugin install” is checked in the Domino Designer preferences. You can find a set of instructions how to install the SBT SDK on DDE on the same address:

Setting up a Notes application

Create a new Notes application from scratch. I called mine ‘bornsocial.nsf’. Open the Xsp Properties file in DDE. Include the following libraries:





The Social Business Toolkit leverages a credential store for single sign on. For OAuth for example the user tokens are stored in this repository so that users don’t have to authenticate and grant access to services like IBM Connections for every session. The OAuth application tokens are also stored in this repository so that all tokens can be managed in one central place. You can read more on the credential store here: And it is also explained in the following video:

In basic: the implementation of the credential store is performed by the use of a managed bean. The usage of this credential store is then defined in an endpoint. An endpoint encapsulates the access to a service provider, like Connections or SameTime.

In the Package Explorer open the faces-config.xml file:



Add the following lines:

<!– Token Store memory implementation –>

<!– Password Store memory implementation –>


In the first example(s) we are only going to demonstrate to connect to IBM Connections. Add the following lines:


For value of managed property ‘url’ you must enter the address of your connections installation or in case you are using IBM Greenhouse for demonstration purposes you can choose ‘’.

Login page

A custom login page will presented when a user initially tries to connect to IBM Connections:



The elements for the login page are in the XPagesSBT.nsf application which comes with the SBT SDK. The nsf is located in folder redist\domino. The login page consists of the following design elements:

Name Type
_BasicLogin.xsp XPage
sbtLoginPage Custom Control
sbtLoginPanel Custom Control

You can simply copy the design elements from the sample application in your application and modify them e.g. for branding.

Connecting to Connections

Your application is now ready to connect to Connections. Where you place the code to connect to Connections is up to you. A recommended approach could be to establish connections via Managed Beans.A managed bean is nothing more fancy than a registered a JAVA object.

Managed Bean

In our first example we are going to read the content under My Files in Connections. These are the files that you have uploaded and shared.

  1. Create a new Java design element (Java Class).
  2. Enter the following code:

package com.quintessens.bornsocial.sbt;

public class ServiceBean implements Serializable{
private static final long serialVersionUID = 1L;

public FileList getMyFiles() {
FileService service = new FileService();
try {
return service.getMyFiles();
} catch (FileServiceException e){
return null;

Code explanation

The function getMyFiles gets handle to the FileService object. Then the getMyFiles function is called to get all the files (both private and shared) the user has uploaded in Connections. Then a FileList object is returned to the caller.

The FileList object can then be used in a suitable XPage control e.g. the DataTable or the DataView control.


In order to access the Managed Bean you have to register it. This is done in the faces-config.xml file. Open the file and add the following lines:


You will access the bean via its name ServiceBean.


Finally we have come to a point where we can display the files that the managed bean returns from IBM Connections. I have choosen the XPages environment to do so.

Custom Controls

A best practice in XPages development is to divide functionality in individual blocks known as Custom Controls. This make it easier to re-use the functionality across your application.

Custom Control for a ‘My Files’ overview

  • Create a new Custom Control design element.
  • Add the following code to the control:

<xe:widgetContainer id=”widgetContainer1″ itleBarText=”#{javascript:return compositeData.widgetTitle;}”>
<xe:dataView id=”dataView1″ var=”file” rows=”5″ columnTitles=”true” styleClass=”filesDataView”>
<xe:viewExtraColumn columnTitle=”Filetype”></xe:viewExtraColumn>
<xe:viewExtraColumn columnTitle=”Created”></xe:viewExtraColumn>
<xe:viewExtraColumn columnTitle=”Size”></xe:viewExtraColumn>

<xe:viewSummaryColumn columnTitle=”Filename”></xe:viewSummaryColumn>
<xp:panel xp:key=”noRows” id=”topicsPanel2″>
<xp:div styleClass=”lotusWidgetBody”>
<![CDATA[#{javascript:return (viewScope.myFilesAvailable ? “No files found.” : “My Files unavailable.”);}]]>
<xp:panel id=”summaryPanel” xp:key=”summary” style=”width:50%;white-space:nowrap;”>
<h4><xp:link styleClass=”dataViewLink” escape=”true” id=”link7″ target=”_blank” text=”#{javascript:return file.getTitle();}”>
<xp:this.value><![CDATA[#{javascript:return file.getContentUrl();}]]></xp:this.value>
<xp:panel id=”typePanel” xp:key=”extra0″ style=”width: 20%;white-space:nowrap;”>
<![CDATA[#{javascript:return file.getType();}]]>
<xp:panel id=”sizePanel” xp:key=”extra2″ style=”width: 15%;white-space:nowrap;”>
<![CDATA[#{javascript:var size = file.getSize();
var kilobyte = 1024;
var megabyte = kilobyte *1024;
if(size < kilobyte) {
return (size + ” B”);
}else if(size < megabyte) {
return (Math.round(size/kilobyte) + ” KB”);
}else {
return (Math.round(size/megabyte) + ” MB”);
<xp:panel id=”panel1″ xp:key=”extra1″ style=”width: 15%;white-space:nowrap;”>
<xp:text escape=”true” id=”computedField3″ value=”#{javascript:file.getCreated()}”></xp:text>

As a result the files in IBM Connections for the authenticated user will be listed e.g.:



Code explanation

The DataView control is using the getMyFiles function from Managed Bean ServiceBean for data binding:


<xe:dataView id=”dataView1″ var=”file” rows=”5″ columnTitles=”true” styleClass=”filesDataView”>


It iterates through the returned FileList object and for each column values from each entry in the ‘file’ collection the value is computed e.g.:

<xp:panel id=”summaryPanel” xp:key=”summary” style=”width:50%;white-space:nowrap;”>
<h4><xp:link styleClass=”dataViewLink” escape=”true” id=”link7″ target=”_blank” text=”#{javascript:return file.getTitle();}”>
<xp:this.value><![CDATA[#{javascript:return file.getContentUrl();}]]></xp:this.value>

API Explorer

Use the SBT API Explorer which method each object provides:




As you have seen getting started with the Social Business Toolkit is not that difficult for XPages developers. As alternative you could also choose JavaScript or JAVA if those skills fit you better. The SDK will help you understanding Connections piece by piece from a developer perspective.

In the example information is read from Connections but you can also post data. The SDK allows you to create great ‘social enabled’ applications. This can be applications that solely work with Connections or integrate with other platforms e.g. IBM Notes.

I hope to write more on the Social Business Toolkit in another post. Thank you for reading.

Patrick Kwinten


Internationalization of the Pager controls

While translating an app for internationalization I noticed that Pager controls (e.g Pager Expand/Collapse, Pager Show/Hide Details)) were still default in English. So I wondered how you could translate them since they did not adapt to the selected language in my browser?

It turns out that a workable way is to set the text explicit in the controls first to your default application language:



Now they have become available for translation:


If you open the properties file for the XPage/Custom Control you can allocate the strings to translate:



The downsize to this approach is that you have to translate them for every design element you have the controls on. I assume this should not be the intention, so if you know the proper way, please let me know.



Paul Withers replied to my post how to set the pages in the pagerSizes control.


Here is a demo code:

<xe:pagerSizes id=”pagerSizes1″ for=”dataView1″ text=”Page {0}” />

In the properties file translate it accordingly e.g.

pagerSizes1/@text=Sida {0}

I am not sure how to set the ‘All’ text.


The pager control you can also translate. A description you can find in the XPages Wiki maintained by Julian Buss.


Here is an example code:

<xp:pager partialRefresh=”true” id=”pager1″ for=”dataView1″ style=”padding-right:20px;”>
<xp:pagerControl type=”Previous” id=”pagerControl1″ value=”Previous”></xp:pagerControl>
<xp:pagerControl type=”Group” id=”pagerControl3″></xp:pagerControl>

<xp:pagerControl type=”Next” id=”pagerControl2″ value=”Next”></xp:pagerControl>

Again, translate the labels in the properties file accordingly.

Below is the result of the translation: