prettytime for your XPages


I guess most of us believe that not all users are robots, and especially in social applications where you try to approach humans as human friendly as possible the display of date and time in such format can be off added value.


There are many scripts to display date and time in a human friendly format. For a project we are using timeago, a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. “4 minutes ago” or “about 1 day ago”).

However, in combination with an infinite scroll feature to navigate through document collections we notice that the script not always return instantly the transformed date/time.

That is why I looked at a server-side transformation.


PrettyTime is an OpenSource time formatting library. Completely customizable, it creates human readable, relative timestamps like those seen on Digg, Twitter, and Facebook.

It turned out the implementation of PrettyTime was quiet simple. I will describe the steps for you.

Install the jar & call the Java class

Download the project jar file and place it in the WebContent \ WEB-INF \ lib folder.  For a computed field on a custom control in a repeat control I have as SSJS code to call the Java class:

<xp:this.value><![CDATA[#{javascript:var theDate = compositeData.Date;
p = new org.ocpsoft.pretty.time.PrettyTime();
p.format(new Date(theDate))}]]></xp:this.value>

As a result I get to date displayed as:


Pro’s & Con’s

In comparison with client-side solutions I have detect some con’s and pro’s for a server side solution:

  • Static; the client side solutions are capably of updating the date/time value on the fly.
  • Speed; the server side generated human friendly date is there when a document row is presented.
  • Extensibility; the number of display languages is more numerous for most client-side solutions. Also you can often “configure” the text format when desired.
  • Consistency; having a human friendly date in a local language may be in conflict with internationalization of your XPages app since that might require more work.

Anyway: I happy to hear how you have solved the human friendly date issue.

Happy development!

new release XPages OpenLog Logger and custom runtime error page


Good news for me! In an XPage application I wanted to provide an error logging function and preferably to OpenLog. I had problems with implementing the previous version of OpenLog logger but yesterday a new version is released on OpenNTF which took away that pain.

OpenLog logger

The OpenLog logger has some powerful features:

  • It can be used in your managed beans and other Java classes.
  • It can be used directly from SSJS with as little as openLogBean.addError(e,this);.
  • From SSJS all caught errors on the page are logged out together, at the end of the request.
  • Only two method names are used from SSJS, one to add an error, one to add an event, making it easy to pick up
  • From SSJS you only need to pass the information you wish. There is no need to pass nulls or empty strings.
  • From SSJS only one unique error per component is logged, regardless of how many times the error is encountered during the refresh lifecycle.
  • In SSJS, if you use a custom error page, uncaught errors will also be logged.
  • Uncaught errors will be logged for the page the error occurs on, not your custom error page.
  • You can define the OpenLog path and a variety of other variables without needing to change the code.
  • The functionality and code are available as an OSGi plugin (the best practice approach) but can also be included in individual NSFs.

Custom Runtime Error Page

In case you want to implement such functionality then I recommend you also take a look at how to define a custom run time error page. In my project I am using Bootstrap for UI look & feel, so I followed the steps Erick McCormick provides in this blog post.


In Erick’s post you will find that he uses Google’s code-prettify project. A nice feature is to ability to set a skin for the error message box. There are plenty of color themes available for the prettify project but if you use Bootstrap like I do you could try this theme.

A big thank you to the OpenLog logger project members and Erick!



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() {

collapsible menu with persistent state


For a project I needed to have collapsible menus where the state is persistent, in other words after a refresh or a reload it should now if the menu was opened or closed.

The content of the menu is dynamic and rather complicated containing sub levels with multiple actions in them. Each level item would trigger to rebuild the presented document collection via Java (perhaps more common known as a faceted search).


Since we are using the Extension Library I took a look at the controls but I could not find one that fulfills my requirements (accordion, dojo accordion pane, dojo tab pane, outline). To prevent to embed “another” Jquery plugin I looked across the Dojo site and found the titlePane dijit.

A TitlePane is a pane that can be opened or collapsed, with a title on top. The visibility of the pane’s contents is toggled by activating an arrow “button” on the title bar via the mouse or keyboard. It extends ContentPane but since it isn’t used inside other layout widgets it’s not in the dijit.layout module.

To be honest I am not a Dojo warrior and mostly are satisfied with jQuery plugins but this sounded like something that I could use. For now I only have to menu sections to collapse; a KPI section and a Filter section. Each section has there level 1 and level 2 items.

Since the application works as much as possible with partial refresh and each filtering affects the content of these 2 sections I also needed to save the state of the panes (open or closed). This sounded like a combination of client (open / close the pane) and server side (save the state in a scope variable) actions. Hmmm. From day 1 I have found this mixture of CSJS and SSJS a problem child which you tend to forget/mess up. I decided to implement the approach Oliver Busse promotes in the following post “Writing and reading scoped variables via client side Javascript“. This approach probably makes the code less cluttered with mixture of languages.

I also noticed that the titlePane dijit is not error-proof implemented in the Bootstrap4XPages project in the Extension Library but I found a fix described in the post “fix for down caret icon in dijit.TitlePane when using Bootstrap from ExtLib“. I got a response from Brian Gleeson (IBM): A fix for the dijit.TitlePane issue has been delivered, and should show up in the next Extension Library release. Great & thank you Brian!

So having conquered the circumstances described above what became the result and how did I implement it?


Let’s start with the result:


Image 1: first section opened.


Image 2: both sections opened.


Each of the KPI and Filter item (can) have sub levels with different presentation and functionality which I will not describe for simplicity reasons.


The titlePane dijit is not so hard to implement. Add the dojo module to your resources:

<xp:dojoModule name=”dijit.TitlePane”></xp:dojoModule>

Next add a div to your XPage and set the dojoType and title property. The mat-card styleclass provides a material design presentation.


Also define custom attributes for open and toggleble for the div element. These are properties of the titlepane dijit.

Event handler

The event handler checks the state of the pane and writes the state to a scoped variable when the title section of the pane is clicked. For a complete description how to implement Oliver Busse’s utility I would like to direct you to his site.

id=”titlePaneKPI”  dojoType=”dijit.TitlePane” title=”Sales KPI”  styleClass=”mat-card”>
<xp:attr name=”open” value=”false”></xp:attr>
<xp:attr name=”toggleable” value=”true”></xp:attr>
<xp:eventHandler event=”onclick” submit=”false”>
<xp:this.script><![CDATA[var KPI = dojo.dijit.byId(“#{id:titlePaneKPI}”);
if ({
setScopeValue(“view”, “MenuKPI”, “1”);
setScopeValue(“view”, “MenuKPI”, “0”);

</xp:div><!– /dijit.TitlePane –>

Odd behaviour

I also noticed a strange behaviour of the titlePane. At start I had multiple controls on my xpage to see their differences and capabilities. When I removed the Dojo Accordion Pane the carets for the dijitPane behaved odd:


Note the plus (+) and minus (-) signs after the caret :-?

So in front of the TitlePane dijit divs I placed a Dojo Accordion Pane and set the display style property to none (via a styleclass):

<xe:djAccordionPane id=”djAccordionPane1″


titlePane content

The content of the titlepane can be anything, in my case via a repeat controls a list group with list-group-items is generated.

  • Lead Flow

    <!– /col-xs-12 col-sm-12 col-md-12 col-lg-12 –>
    </div><!– /row –>

    Qualified Opportunities

    <!–/col-xs-12 col-sm-12 col-md-12 col-lg-12 –>
    </div><!– /row –>


  • Personally I find it a good practice to comment the closure of elements, especially when using Bootstrap nowadays.

    Event handler when loading the page/custom control

    The last thing to include is an event handler that opens or closes the titlePane dijits depending on their last states that are stored in scoped variables.

    I placed the event handler on the custom control where the titlepanes reside in so it gets initiated every time a partial refresh takes place for the custom control.

    <xp:eventHandler event=”onClientLoad” submit=”false”>
    <xp:this.script><![CDATA[function getMenuState(){
    var KPI = dojo.byId(“#{id:titlePaneKPI}”);
    var Filter = dojo.byId(“#{id:titlePaneFilter}”);
    var KPI_status = getScopeValue(“view”, “MenuKPI”);
    var Filter_status = getScopeValue(“view”, “MenuFilter”);

    I was not able to store the function in a CSJS library because it kept telling me then that dojo could not find any note to act upon, but this is probably due to my lack of guru knowledge of Dojo.

    Wrap up

    That is about it! With little programming and a couple of hordes I managed to apply a menu with a consistent state when performing partial refreshes!

    I am looking forward to hear what alternative solutions you have produced, perhaps they can serve me in the future. Happy coding!


    indexVar property from xp:repeat control not available in styleClass property of xp:button control

    In an application we are using Bootstrap (BS) and in BS you can highlight the state of a button by adding an active (style)class. In my situation the button(s) reside in a repeat control and basically a click on a button will update a part of the screen and change the collection of documents displayed.

    So my initial idea was to set a scope variable with the ID of the button clicked and update also the repeat control containing the buttons and modify the styleclass property based upon this scope variable.

    How to get the client ID of an xp:control I found in the answer of Tim Tripcony on a question on Stackoverflow.

    However I noticed a difference in the ID when an xp:control resides in a repeat control; it contains an incremental number from the repeat control e.g.


    If you use the same method (


    for an attribute or something you would miss the incremental number e.g.


    So I posted a question on Stackoverflow about my options and thanks you for all the quick replies.

    Some answers directed me to use the indexVar property of the repeat control and add place that in my scope variable and use it in the computation for the styleclass property of the button.

    But then an error appeared on screen…

    [ReferenceError] ‘index’ not found

    I tested the computation with other xp:controls like a xp:link control or xp:computed text but no errors there.

    So I assume this ‘feature’ (as my collegue names it) is just not implemented yet in XPages for the xp:button control?

    Tip of the day: isDocument() for nested data in the Data View control

    You can show nested data in the details section of the Data View control. Read about it here: Data Views – Part 10: Nested Repeat in the Detail Section.

    In case you have a ‘flat’ Data View (one without collapisble categories) you do not need to detect if your ‘var’ property is a document. But when you have a categorized Data View you better check it otherwise opening/closing categories will give an error…

    Summary JSON in XPages

    I have written a document summarizing the usage of JSON as data-interchange format in XPages development. The document has no intention to be complete, it only covers the areas I have worked with JSON in XPages (and as far as I remember)

    Please feel free to add your examples or links to more supplementary resources.

    Happy reading!

    Job Wanted

    Looking for a creative brain? Choose me!