Making OpenLog entries a bit more lively

I assume you are using the OpenLog project on OpenNTF in most of your projects like I do. And you twist with the SEVERITY options to distinguish the openlog view entries as much as possible. If you feel limited to use one of the three options to get a red + or ++ sign in a column perhaps the emoji-java class is something for you?

Just look at all the available emoji’s and imagine how they could lively up OpenLog!

So what should you do to enable this? Download the emoji library and include them in your code, e.g. an Java agent as an archive:

Then in your code start using them! For example:

will result in something marvelous as:

So don’t complain next time that reading the logs is such a boring task!

Happy development 🙂

XPages hack – visualizing checkboxes that fail validation

In an application I have added some CSS to highlight fields that fail validation. The css looks as followed:

Basically I an looking for the aria-invalid=true attribute on input elements. Works great but not on all input elements. For example re-styling of checkboxes requires some work. But what if you would re-style the element that contains the checkbox?

In the following example I have captured a checkbox control inside a table data cell of 1% width:

For the checkbox control I have defined a custom validator that gets only triggered when a certain element send the xpage to the server (an button control with id btnSendToCommittee)). When the validation fails the checkbox also gets the aria-invalid=true attribute.

To apply a visual indication if a certain checkbox fails I have setup a simple JS function:

This function scans the page for inputs with the aria-invalid=true attribute and for all matches checks if the found item is a checkbox. If so, the parent, containing element (the table data cell) will be applied some styling.

Besides a listing in the xp:messages control I also have a visual indicator for the checkbox on the location of the xpage:

I have not managed to write a single-line css selector therefor I still loop through the found inputs that match the aria-invalid=true attribute. Here your assistance comes in… 😉

Happy coding!

Sticky headers in Bootstrap from ExtLib

I received a request from a customer who would like to preserve the action buttons on an xpage when the user scrolls downs a very long form.

The application is already using the BS theme from the Extension Library with the sticky navbar option in use so this would implement a second ‘sticky element’.

Here is an example how the xpage looks like:

Note: I added some Lorem Ipsum content in stead of form elements for demo purpose, but you get the idea of a endless form to fill in.

So first I added a listener for the scroll event:

window.onscroll = function() {scrollFunction()};

The scrollFunction is as followed:

function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
console.log('make SMALL')
'min-height': '32px',
'height': '32px'
'height': '32px',
'padding-top': '5px',
'padding-bottom': '5px'
$('.navbar-nav > li > a').css({
'padding-top': '5px',
'padding-bottom': '5px'
$('#infoLanguage > div.dropdown').css({
'padding': '5px 5px'
'display': 'block',
'z-index': '-1'
'display': 'block',
'position': 'fixed',
'top': '30px',
'height': '30px',
'z-index': '996'
} else {
console.log('make LARGE')
'min-height': '50px',
'height': '50px'
'height': '50px',
'padding-top': '15px',
'padding-bottom': '15px'
$('.navbar-nav > li > a').css({
'padding-top': '15px',
'padding-bottom': '15px'
$('#infoLanguage > div.dropdown').css({
'padding': '15px 10px'
'display': 'block'
'display': 'none',
'position': 'fixed',
'top': '0px',
'height': '30px',
'z-index': '0'

I also added some additional styling for style and transition effects:

	padding:5px 150px; 
	box-shadow: 0px 3px 5px 0px rgba(182,182,182,0.75); 
	transition: all 0s, opacity 0.5s linear;

	transition: all 0s, opacity 0.5s linear;

	transition: all 0.5s;
.navbar-brand img{
    transition: all 0.5s;

So I basically make 2 form-header elements, on for ‘normal’ display when focus is on the top and one when the user starts to scroll down from a certain point. The form elements are basically the same but more adapted on the height of their container.

One thing I would like to note is that I had to place the ‘smaller’ sticky header under the navbar so it can inherit the same with as its parent. Otherwise I would look not nice with a bit of displacement.

I also noted a small shaking effect when I would use the visibility option to show/hide which form-header to display. Choosing here to play mess with the z-index property solves that issue with shaking when scrolling slowly in the beginning.

Here is the result when the user starts to scroll down. The form header becomes small but sticky under the navbar. The buttons to interact with the form are available where ever the user is in the form:

A small new feature in the app but I think it will bring a lot of user satisfaction! Happy coding 🙂

Fixing the Tooltip function in XPages #2

In a previous post I wrote about the disfunction of the tooltip after validation with the Domino server. It turns out my gigia-form has a lot of fields with visibility properties set that are calculated after partial refresh. To have tooltip fixed for the fields that become visible during interaction with the user I needed to apply another patch.

From the xsnippet for the standby control I took the first part to set up the ability to subscribe to the different partial refresh events. Then I added some lines to subscribe to the partialrefresh-complete state:

The initToolTip function did not changed:

With this subscription the tooltip becomes applied to fields that become visible after validation (when the user continues to fill in the form).

The possibility to subscribe to partialrefresh states is also a use-case for other plugins I use, for example to automatically adapt textareas to user-input.

Fixing the Tooltip function in XPages

A colleague noticed that the tooltip function on a Xpage stopped working after submitting the page to the server and when the validation did not pass. The same behaviour occurred when I added a computed text control that would spit out an anchor reference using a tooltip. Odd.

I found an old post of mine where I described the use of the xe:tooltip control. This control seems to keep working even when the XPage fails to validate. So that is a win.

However, in my case I would have to apply the control on many places which does not make me happy.

I also wanted to alter the layout of the tooltip a bit via a template so I found this piece of code. To my delight I noticed that the tooltip also kept working after a failed validation!

So a simple bit of code can fix tooltip again:

So after applying a template for the tooltip and applying some CSS my tooltip looks a bit more readable and less boring:

Note that I have to set the xp:this.title property for the inputTextArea control. Adding an additional attribute for the placeholder won’t do for the template.

For Nathan T(eacher) Freeman

Today I read the sad news that Nathan T Freeman is no longer among us. I was actually googling last week, curious what he was working on.

I met Nathan a couple of times. The first time was at a Lotussphere sponsor party (by Nokia, 2008?) with a Rock Hero theme. I was honoured you and Tim Tripcony joined our table. Probably because team Sweden was already into heavy (free beer, duh) drinking and getting louder and louder.

I thought you and Tim were the rock heroes in the Domino world. But actually you were more a teacher for me. I actually made a long-long ago a song for all my teachers then, and see: you were one of them.

Thanks for your guidance with helping me find the solutions for my technical challenges!


TestiNG XPages

Introduction with Selenium IDE

A while ago I started my journey into testing applications. Like most people I started with Selenium IDE since it’s free, easy to install and setup. The idea was to record the workflow in an application and play it back after the development of every new feauture.

A nice idea but it does not work so well with the dynamic ID’s XPages generates for it’s controls. Instead of the id attribute you can then go via XPath and apply parameters. Here is an example for my Edit Box control that has id ‘inputCustusomerName’ -> starts with @id,’view:’ and contains @id,’inputCustusomerName’.

It becomes a lot of fiddling with the IDE and basically it becomes a long, long script (if you have a larger workflow) which you are capable of structuring in smaller pieces via the suite option.

Selenium WebDriver

When talking with more experienced test people they all drop the IDE and go for Selenium Webdriver. I will not go into details on WebDriver but the specs of WebDriver overclasses the IDE by far and it’s available in different languages. Since my XPages applications are already written mostly in Java so one is acquainted in a sense with an Eclipse environment (DDE) the step to start writing code in Eclipse IDE is not that big.

So with WebDriver used across the organization I feel more assured to join that community instead working on tests on an island (with Domino is also in a way). We have actually an infrastructure for WebDriver with Selenium Grid and support via a framework based upon Selenium WebDriver.


When you start writing your tests in the beginning you end up like with the Selenium IDE in a long script that can do one thing. If you want to take the next leap then check TestNG. It extends the test capabilities by far and allows to structure and configure your tests to way you want.

ith TestNG your can setup ‘testsuites’ and in those suites you can define which tests to run. I use the suites to run tests in different roles.

At first I looked at the option to run my tests from DDE ( I found some posts/presentations where it looked it should be possible) to avoid moving to another development IDE. But after installing the TestNG plugin in DDE and writing some scripts using WebDriver when running the TestNG suite it searched for files that where outside my NSF (workspace directory location). So the option to remain coding in DDE I gave up.

Test framework

If you work in a larger organization you are probably not the first person who writes tests. I found in my organization a supported test framework that is based upon Selenium WebDriver and TestNG and includes more features like for example ReportNG which allows you to create HTML reports of your tests. Selenium WebDriver has a feature to take a screenshot so that is nice to include in your test report.

The framework has many more features which I have not touched (yet).

Lessons learned

With Selenium WebDriver you will face the same problems with dynamic id’s as in Selenium IDE. Use XPath as selector the web element e.g.:

When accessing lists, like link controls in a repeat control these XPath reference does not work. they all end with the same ID part. So when you register a new customer and that customer will appear in a table you do not know in which row that customer will appear depending on the content in that table. You can even have so many customers in the table so that you need to use a pager.

In Domino it is common you define userroles in your Access Control List and then distribute these roles to users/groups. Especially if you want to test a workflow you access the application in different roles. Via TestNG tend to provide a role as parameter, and for that role I use different user credentials. When working in a team and Git you do not want to expose these credentials so I started to use Jasypt for decrypting these values.

If you have an application that supports multiple languages you also want to check your application in those languages. In WebDriver you can find links by their text and these textes probably differ in languages.


Tests are a common part of development and in modern development test drive development. As a Domino developer you have to adapt to this paradigm. If your team is too small for test developers you probably have to write those test yourself. Writing tests expands your development skills and you talk with colleagues in different areas of your organization you otherwise never would have contact with.

In my situation WebDriver is a common tool and I could not find any JavaScript supported framework available in our organization. Writing test scripts with WebDriver is not a big step for XPages developers and I recommend to take a look at TestNG to be able to structure your tests from the start.

Test is a wide area and I have only explored a part of it. Test is also an important part of CICD (continious integration continious delivery) if you happen to have as goal to deliver an automated process for the build of your Domino applications.

Good luck and enjoy the journey!

It’s a bug, it’s a pain, it’s an xp:checkBoxGroup!

Many where wondered why the xp:checkBoxGroup with the Bootstrap theme was transformed into a HTML table.

I have not heard so many complained that when you add a styleClass to it another class attribute is added and the browser simply ignores the second class attribute. Hell yeah, when you create a div element and add two class attributes DDE complains that a class attribute was already added for that element.


xp:checkBoxGroup id=”checkBoxGroup1″ styleClass=”testBox”

becomes in your browser source

div class=”checkbox” id=”view:_id1:checkBoxGroup1″ class=”testBox”

and your browser renders:

div class=”checkbox” id=”view:_id1:checkBoxGroup1″

Save your day, Save the state of your repeat control

I am writing a demo application with a faceted search functionality. For displaying the “results” I am using a repeat control.

Now users want to switch back and forth between the “view” and the “document”. If you display the “results ” in a “view” with an “view panel” control you can apply a pager to that view and for that pager you can apply a “pager save state” control. So when you go from “results” xpage to the “document” xpage and back you land in the same state (same page in that view) and the user does not have to navigate again to the last page in the view panel control.

Now with the repeat control that is a different thing. The “pager save state” was not designed for it. Luckily there is an approach which will deliver you the same result. Add for your repeat control the property: first=”#{javascript:return (sessionScope.first != null)?sessionScope.first:0;}”. Than from the link (could be a button or whatever) in the repeat control add the following in the onClick event handler: sessionScope.put(‘first’,getComponent(“rpCollection”).first);. Then do your normal stuff (like redirect to a page). If you from that redirected page go back to the “results” page the repeat control will show the last set of items from where you left.

I hope it will save your day and your project. Happy coding! 🙂