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!



Infinite scroll and prevent multiple event fire

Probably a lot of you use the “Simple custom control to add infinite scrolling to repeat or views” available as codesnippet on OpenNTF.

This snippet allows you to load a next set of documents for a repeat or view control when you reach the bottom of the page. A feature that will be appreciated highly by mobile users of your Notes app.

If you look at the code, it fires the click event of a pagerAddRows control when you have reached the bottom of the window. This will happen as long as you are on the bottom of the window. What can this cause for disturbance:

  • It fires multiple events, while it is at the bottom of the window. You only asked for 1.
  • The events are not chained so when the second event is returned quicker that the first it will be inserted before it, which messes up the sorting of your collection.

I have not found a way to create a JS function to load a set of data from a repeat control in the ajax way. That would allow you to use the success property and set a state (ajaxready, true/false) for your window. This state could be used to check if the fire event is entitled to run or not.

Drop a line in cause you know the answer to such a function.

As a temporarily solution I suggest to keep the click event for the pagerAddRows control but set a timeout.

Here is what the code could look like:

<xp:scriptBlock id=”scriptBlock1″>
<![CDATA[$(window).data(‘ajaxready’, true).scroll(function(e) {
if ($(window).data(‘ajaxready’) == false) return;
if ($(window).scrollTop() >= ($(document).height() – $(window).height())) {
$(window).data(‘ajaxready’, false);
setTimeout(function() {
$(“.infiniteScroll ul li a”).click();
dojo.query(“.timeago”).forEach( function(el) {
var timeagoWidget= dijit.getEnclosingWidget(el);
timeagoWidget = new timeago.Timeago({}, el);

//refresh timeago
$(window).data(‘ajaxready’, true);
}, 200);


Here is set a timeout for 200 milliseconds which turns out to be quiet generous in my application, but at least I have prevented the disturbances mentioned earlier.

Happy coding!

Make the search bar in the Application Layout control ‘sticky’


I guess many of you have or are using the Application Layout control (depending on your willingness of coping with limitations) and use Bootstrap to ‘escape’ IBM’s oneUI theming. In the control you can set the fixedNavBar property to fixed (top, bottom, unfixed?) but basically this will just claim precious space on top of the screen, especially for mobile users.

In case you are using the Search option in the Application Layout control you will find that usefull and want to have it available always and in particular for smaller devices where scrolling back to the top takes a bit more effort. Since you are already using Bootstrap the rescue is in near reach…


The Affix plugin in Bootstrap allows an element to become affixed (locked) to an area on the page. This is often used with navigation menus or social icon buttons, to make them “stick” at a specific area while scrolling up and down the page.

The plugin toggles this behavior on and off (changes the value of CSS position from static to fixed), depending on scroll position.

Implementation in XPages

Since we are using the Application Layout control we need to take a different swing than the normal implementation.

JavaScript onClientLoad

First we will add an ID to the titlebar section and then we register the affix plugin for it:

<xp:eventHandler event=”onClientLoad” submit=”false”>
<xp:this.script><![CDATA[$(‘.applayout-titlebar’).attr(‘id’, ‘titleBar’);
//in order to make it ‘sticky’ to the top…
offset: {top: 40}

CSS Styling

With CSS we define the style properties for the applied affix class:

#titleBar.affix {
position: fixed;
top: 0;
width: 100%;


That was rather easy, right?!

Below is a sample when an XPage is loaded:


And here is a sample when you scroll down the page:


Happy development!

Hiding Notes links for Mobile Web users

Probably you are working in a collaborative environment where users access their beloved Notes apps with multiple clients: The Notes client, The Notes Browser plugin, Web browser and mobile devices.

Not all Notes applications have defined business cases in which they should become web-enabled. This could be because of application complexity or that the life-cycle / ownership of the application is poorly defined.

Nevertheless it is hard to prohibit that links to these applications or documents in them are being published on web-pages (probably you want to promote the distribution of information). Luckily there is that lovely tool called the IBM Notes Browser Plugin but this plugin is restricted to normal web browsers and not to all of them.

And then you have your ‘leading’ technology adapting usergroup that prefer to access Notes data in app and web-page form. For them the Notes Browser Plugin is not available so why should you bother to show them links to documents in applications that have not been web-enabled yet?

The following script will hide these Notes link on web-pages  and replace them with just text. It uses the deviceBean which provides an easy to use and easy to program way of identifying a popular range of mobile and tablet devices.

var isMobile = ‘#{javascript:return deviceBean.isMobile()}’;
if (isMobile==’true’){
$( document ).ready(function() {
$(“a[href^=’Notes://’]”).each(function () {

Add it to the onClientLoad event of your XPage.

Applying some golden ratio to my XPages app


A Friday XPages and beer tonight and I decided to tackle a beauty-contest problem I was confronted with earlier this week.

In an XPages application I am mixing material design principles and bootstrap together, more specific I am using the CSS grid system in Bootstrap to display collections of data in a tiled display format (better known as cards).

Golden ratio

Bootsrap enables me to make the tiled display responsive so for xs devices I display max 1 card per row, sm devices max 2 cards, md or lg max 4 cards. This works well for the width of a card BUT to make the cards look more aesthetic/ecstatic I want to apply some golden ratio or divine proportions.

Gold Bootstrap

First I thought to look if there is something available out there and I came along Gold Bootstrap, since I am already using Bootstrap, but this did not help me.


So I decided to pop open a beer and do it myself. This turned out to be rather simple… with the help of the responsive bootstrap toolkit.

The code below will check the viewport and depending on which viewport change the height style property of a card. Since I do not want large cards for xs and sm devices I set a width of 90 pixels then. For md and lg devices the cards may grow in size (width & height) but respect this golden ratio:

(function($, document, window, viewport){
$(document).ready(function() {
console.log(‘Current breakpoint:’, viewport.current());

if(“<md”) ) {
$( ‘.card-holder .list-item’ ).css( ‘height’, ’90px’);

if (‘>sm’)){
var firstCard = $( “.card-holder” ).first();
var firstCardWidth = firstCard.width();
$( ‘.card-holder .list-item’ ).css( ‘height’, (firstCardWidth/1.618) + ‘px’);

console.log(‘Current breakpoint:’, viewport.current());
if(“<md”) ) {
$( ‘.card-holder .list-item’ ).css( ‘height’, ’90px’);
if (‘>sm’)){
var firstCard = $( “.card-holder” ).first();
var firstCardWidth = firstCard.width();
$( ‘.card-holder .list-item’ ).css( ‘height’, (firstCardWidth/1.618) + ‘px’);

})(jQuery, document, window, ResponsiveBootstrapToolkit);

As a result I get smaller cards in xs and sm devices:


and bigger cards in a 4 column layout on md and lg devices which resize really nice:


Now I just need to fill up this additional landscape on a card with some usefull information…

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!


    fix for down caret icon in dijit.TitlePane when using Bootstrap from ExtLib

    For unknown reason the dijit.TitlePane is not part of the Dojo controls in the ExtLib. You can implement your own version and Mark Roden posted a nice description how to achieve this. HOWEVER in case you are using the Bootstrap theme in the Extension Library you will notice when opening a pane the down caret icon can not be displayed.

    Here is the build up for 2 TitlePanes dijits:

    <xp:div id=”titlePaneGemCars” dojoType=”dijit.TitlePane” title=”German Cars”>
    <xp:attr name=”open” value=”false”></xp:attr>
    <xp:attr name=”toggleable” value=”true”></xp:attr>
    <xp:div id=”titlePaneJapBikes” dojoType=”dijit.TitlePane”
    title=”Japanese Bikes”>
    <xp:attr name=”open” value=”false”></xp:attr>
    <xp:attr name=”toggleable” value=”true”></xp:attr>

    Here is how it looks like in the browser:


    In case you choose another theme e.g. oneUI (*cough*) the panes are displayed as followed:


    Note the display of carets is different (no carets for closed panes).

    So how are we going to fix this? Via your friend CSS! Include the following CSS snippet at your page/stylesheet/theme:

    .xsp.dbootstrap .dijitTitlePane .dijitArrowNode::before {
    color: #428bca;
    font-family: “Glyphicons Halflings”;
    content: “\e114”;
    font-size: 12px;
    padding-left: 10px;
    position: relative;
    top: -1px;

    The definition is similar for a closed dijit but the content is set here to specific Glyphicon (the chevron down icon). The content is set to a hexidecimal value for an icon? On the glyphicons site you can search for halflings and it will tell for the chevron-down icon the value is UTF+e114.

    As a result your opened titlepane wil have the correct icon displayed:


    Happy coding!

    Ps I assume there is someone smart here to register this break as a request at IBM?