Nice reversible cards in a IBM Verse style

In an application I am displaying objects with cards. Because the type of objects may differ in type and amount of data (text, images, tables, dates) the cards to display them differ.

Some cards have interaction (popup, dialogs, reversible) and some are just static. In this post I will discuss the reversible card type.

The reversible card has as features:

  • a front card with a folded corner, if you move over the fold an info icon appears which you can click to see the card’s back.
  • when you flip over to the back or front it is all nicely animated.
  • on the back of the card there is another icon to switch back to the card’s front.

The purpose of this reversible card is to save space in my UI, and to provide layout for secondary information, which is more important if you want to look at more detailed information.

It could also be a placeholder for data that, when placed in the front of the card, ask for too much landscape (e.g. a chart).

Things become much clearer with images so here are a few:


Image: Default presentation.


Image: Expand folding (animation) when mouse-over.


Image: animation when flipping over a card.


Image: the back of the card.

I use the cards within a repeat control and with Bootstrap they align nicely and are responsive:


I have no idea when Bootstrap 4 will be released with it’s card component but according to my experience cards are … less useful without interaction.

I made a small video to demonstrate the reversible cards feature:

If you want to implement the card yourself here is the code:


Most of the chemistry is performed with CSS so you also want that:


.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
text-align: left;

.flipped {
height: 100%;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);

.card {
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;

.card .face {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;

.front {
/*position: relative;*/
background-color: #FFF;

position: absolute;
width: 100%;
z-index: 1;
border: 1px solid #e3e3e3;
box-shadow: 5px 7px rgba(0, 0, 0, 0.15);
transition: background 0.4s ease;

.front-content, .back-content {
padding: 20px;
.front-content:before {
width: 80px;
height: 80px;
float: right;
.corner-tip:before, .corner-tip:after {
background-color: #FFF;
position: absolute;
display: block;
z-index: 2;
border-top-right-radius: 60%;
width: 50%;
height: 50%;
content: “”;
.corner-tip:before {
right: 100%;
top: 0%;
background: -webkit-radial-gradient(-180% 200%, circle, rgba(255,255,255,0) 80%, rgba(0,0,0,.2) 100%);
.front:hover .corner-tip:before {
border-right: solid 1px #fff;
.front div.corner:hover .corner-tip:before {
border-right: solid 2px #fff;
.corner-tip:after {
top: 100%;
right: 0%;
background: -webkit-radial-gradient(-250% 320%, circle, rgba(255,255,255,0) 80%, rgba(0,0,0,.2) 100%);
.front:hover .corner-tip:after {
border-top: solid 1px #fff;
.front div.corner:hover .corner-tip:after {
border-top: solid 2px #fff;
.corner { /* edit these sizes for the default revealing corner size */
height: 20px;
width: 20px;
right: 0;
top: 0;
position: absolute;
overflow: visible;
.front:hover .corner { /* edit corner size (First animation, when the whole page is rollovered) */
height: 30px;
width: 30px;
.front div.corner:hover { /* edit corner size (Second animation, when the corner itself is rollovered) */
height: 50px;
width: 50px;
.corner:before {
position: absolute;
top: 0;
right: 0;
content: “”;
display: block;
width: 133%;
height: 133%;
.corner-contents:after {
position: absolute;
top: 0;
right: 0;
content: “”;
background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0) 37%, #DDD 62%, rgba(230, 230, 230, 0.1) 64%, rgba(255, 255, 255, 0) 67%), -webkit-radial-gradient(-50% 150%, circle, transparent 74%, rgba(0, 0, 0, 0.2) 74%, transparent 81%);
display: block;
width: 133%;
height: 133%;
.corner-tip {
position: absolute;
top: 0;
right: 0;
content: “”;
background: -webkit-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200,200,200,0) 41%);
display: block;
width: 100%;
height: 100%;
.corner-button {
position: absolute;
top: 0;
right: 0;
color: #fff;
text-align: center;
display: inline-block;
font-size: 1.6em;
.corner-contents {
width: 125%;
position: absolute;
display: block;
overflow: hidden;
-webkit-mask: -webkit-linear-gradient(45deg, transparent 49%, #000 53%);
top: 0;
right: 0;
height: 125%;
._corner-contents:before {
content: “”;
position: absolute;
top: 0;
right: 0;
content: “”;
display: block;
width: 100%;
height: 100%;
background-color: #eeeef4; /* Match this background color to #fpc_effect-back */
.corner, .corner-contents, .corner-tip {
-webkit-transition-property: all;
-webkit-transition-duration: .3s;
-webkit-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);

.back {
width: 100%;

-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
border: 1px solid #e3e3e3;
box-shadow: 5px 7px rgba(0, 0, 0, 0.15);
transition: background 0.4s ease;


.card blockquote {
border-left: none;
margin: 0;

.card blockquote img {
margin-bottom: 10px;

.card blockquote p:before {
content: “\f10d”;
font-family: ‘Fontawesome’;
float: left;
margin-right: 10px;

Okay, you are now all powered to impress your customers. Happy development 🙂

Setting up a boilerplate for Angular 2


I guess we all say amen to the following quote:

“The Only Thing That Is Constant Is Change” – Heraclitus

Working with XPages / IBM Notes you get scare-mongered a couple times a year thatthe whole thing is dead. With the Java vs JavaScript deathmatch not decided yet as ICS developer you might wonder on what train to jump next.

In the past I have been looking at Angular but never took it to the next level. With Angular 2 recently official released the cards might be different this time. Just look at the job vacancy sites and Angular specialists are searched after everywhere.

So I took a course Angular 2 and now I am migrating an XPages app to Angular 2 to see if the love is both directions.

Angular 2 boilerplate

A big difference with the previous version of Angular is the preparation. Angular 2 requires some sort of boilerplate, which I will describe how to build in this post.


I will be using Domino as the HTTP server, since my data still resides in NSF. So for now my Angular app will live in the WebContent folder, so that is the working directory of my application. For ease of working I have setup a Github project. Added an ODP folder and synched my NSF with that.

In the WebContent folder in my ODP I will create the following documents:

  • tsconfig.json
  • typings.json
  • package.json
  • app/app.component.ts
  • app/main.ts
  • index.html

If you want you can just download a quickstart somewhere.


Create this file in the root of your project. In my course Typescript is used, but you could also script in Angular with JavaScript of course.

tsconfig defines the compiler configuration, here we say that our target code is JavaScript.

“compilerOptions”: {
“target” : “es5”,
“module” : “system”,
“moduleResolution” : “node”,
“sourceMap” : true,
“emitDecoratorMetadata” : true,
“experimentalDecorators”: true,
“removeComments” : false,
“noImplicitAny” : false
“exclude” : [


Also place this file in the root of your project. In this file you define the Typescript declarations. It turns out that the Typescript compiler does not recognize several libraries…

“ambientDependencies”: {
“es6-shim”: “github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd”,
“jasmine” : “github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd”


This file will also be stored in the root of the project. In this file all dependencies and it’s versions are registered, which we will install with NPM.



An Angular 2 app needs at minimum 1 component, the root component. Components are the basic building blocks of Angular applications. A component controls a portion of the screen—a view—through its associated template.

import {Component} from ‘angular2/core’;

selector: ‘hello-world’,
template: ‘<h1>Hello World</h1>’
export class AppComponent {
// … here we will add our logic later

So first you define a component, and then you make it available for export so you can import it into the application.


This file is the bootstrapper in our app. Since our boilerplate is simple it does not contain so much yet:

import {bootstrap} from ‘angular2/platform/browser’
import {AppComponent} from ‘./app.component’


Note: At this moment we do not have declared to use any module so we do not have to create an app/app.module.ts file.


The index file contains out of 2 sections, the first is the header, the other one the body. The header can be divided into 3 steps:

  • add styling
  • load the libraries
  • configure our main.js


The second part is the body content of the HTML file:



We’re done!

With this in place we have our boilerplate in place. Run “NPM install” and thereafter “NPM start” or open the index.html file on your domino server (after you have synced the files back to the NSF (this might take a while).

Also notice how the Typescript files are compiled to JavaScript files:


And finally “surprise-surprise” the result:



Starting developing with Angular 2 is a bit different in comparison with version. Backward compatibility has always been strong for IBM Notes/Domino.

TypeScript is another opportunity for developers. I intend to blog more about my Angular journey and we’ll see how long the love will last 🙂

Here are some links of interest:

Typescript – Quick start

Angular – Quickstart


Adding @mention autocomplete like Facebook, Twitter & Google+ to your XPages app


For an application I was asked to add a feature to add commenting on main topics. In order to stimulate discussions it should be easy to include people in the stream, similar as in Twitter. So writing an @sign should invoke a type-ahead or auto-complete to a user-list and provide suggested users to address.

In XPages you have type-ahead option, but that is only for inputText controls, not for inputTextArea controls. So how to solve this?

A search after “lightweight wrappers for adding @user mention functionality to Twitter Bootstraps Typeahead plugin” brought me to this library. The provided examples looked promising and were just what I needed, even the option to include a profile icon, similar to IBM Connections Smartcloud.


Basic setup

I will guide you setting up a basic structure to add “@Mention” to your XPages app and use a REST service to provide a list of users from your directory.

Step 1 – get the resources in

Not that difficult. Just drop the files somewhere (ordered) in your WebContent folder e.g:


Step 2 – Reference your resources

Next we are going to make these resources available via a Theme design element:mention_impl2

Step 3 – Add an inputTextArea control and bind it to the library

We want to have the @Mention function available to an inputTextArea control so we must not forget to add that to the XPage:


When the document is ready we want to bind the @Mention library to our inputTexArea. I use the infamous XSnippet “x$ jQuery selector for XPages”. Since we will be using the Bootstrap theme in the Extension Library we have jQuery available:


Step 4 – Add REST service

Wait, did we just add $.getJSON(‘REST.xsp/users’, function(result)? What does that provide us?

REST.xsp is an XPage that contains a REST service control from the Extension Library. It calls a serviceBean


The serviceBean is a simple service that will go to a database and collect column values from a view. In this case I am using the also infamous fakenames NSF but that could be your ordinary Domino Directory (names.nsf)


If you open your developer tools in your browser you see the service provides as data:


We have to strip that down with line x$(“#{id:comment}”).mention({}).

Since we are also using the bootstrap theme for @Mention the result looks like:


Splendid! So how is your social application modernization doing?

Add 20 years of experience to your workforce

You can 20 years of experience within IBM Notes and Web development to your workforce by hiring me.

Interested? Read my curriculum vitae on LinkedIn: and get in contact.

I am happy to work WITH you !


Building a search function with DataTables plugin (VIII)


Dates, everybody loves to filter on dates. In Notes views to filter (select) on dates is a criminal offence but luckily filtering on dates in the datatable component is not that hard.

For our search function we are going to apply something as followed:


It are two input fields, set as type ‘date’. In some browsers you get a datepicker presented. If you want to have a more fancy one you can always bring in an add-on.


So for our HTML structure we included in our XPage:


So what are we going to filter on? In my example I have choosen to filter on the birthday. This is not a field available in the names.nsf so we have to add this ourselfs (now you know why HR always forget your birthdays). To do so I have updated my agent to generate person documents. This was my quickest approach:

bday = Round(Rnd()* 28 ,0)
If bday = 0 Then
bday = 1
End If

bmonth = Round(Rnd()* 12 ,0)
If bmonth = 0 Then
bmonth = 1
End If

byear = arr_birthyear( Round(Rnd()* UBound(arr_birthyear) ,0) )
birth = CStr(bmonth) + “-” + CStr(bday) + “-” + byear

Dim dateTime As NotesDateTime
Set dateTime = session.CreateDateTime( birth )
Call doc.ReplaceItemValue(“Birthday”, dateTime)

If you have a better one (I am sure of that) please drop a line how I can obtain it.

So with this birthday field on the person document, we need to updated our Notes view (adding a column). I had to hard-code the format otherwise I did not get a full year displayed:

@Text(@Year(birthday)) +”-“+
@Length(@Text(@Month(birthday))) <2;
“0” + @Text(@Month(birthday));
) +”-“+
@Length(@Text(@Day(birthday))) <2;
“0” + @Text(@Day(birthday));


Also we need to “broadcast” this additional value via our custom service bean:

String birthday = String.valueOf(columnValues.get(12));
if (null!=birthday){

Nothing that fancy. We also need to include the extra column to our table header:


THEN comes the main modification, in our JavaScript.

We need a function to normalize the date (from string to Date object):

var normalizeDate = function(dateString) {
var date = new Date(dateString);
var normalized = date.getFullYear() + ” + ((“0″ + (date.getMonth() + 1)).slice(-2)) + ” + (“0” + date.getDate()).slice(-2);
return normalized;

To apply a date filter to the datatable I have setup the next function:

var filterByDate = function(column, startDate, endDate) {
function(oSettings, aData, iDataIndex) {
var rowDate = normalizeDate(aData[column]),
start = normalizeDate(startDate),
end = normalizeDate(endDate);
if (start <= rowDate && rowDate <= end) {
return true;
} else if (rowDate >= start && end === ” && start !== ”) {
return true;
} else if (rowDate <= end && start === ” && end !== ”) {
return true;
} else {
return false;

In our datatables initialitation script we set the dates for the input fields (let’s hope people may retire in your country at age 65):

var d = new Date();
d.setYear(d.getYear() – 65);
document.getElementById(‘start’).valueAsDate = d;
document.getElementById(‘end’).valueAsDate = new Date();

We need to register any change in the input date fields and call the filterByDate function:

$(“.datePicker”).on(“keyup change”, function() {
var startDate = $(‘#start’).val(),
endDate = $(‘#end’).val();
filterByDate(4, startDate, endDate); // call our filter function
$(“#persons”).dataTable().fnDraw(); // manually redraw the table after filtering

To remove the filter we register a function on the onclick event of the Clear Data Filter button:

$(‘#clearFilter’).on(‘click’, function(e){
$.fn.dataTableExt.afnFiltering.length = 0;

With all this in place we are good to go!


Yet another great feature for our search form! Perhaps you prefer a slider more suitable for selecting date-ranges or a more fancy date-pciker that works across browsers. The choices are up to you!

Building a search function with DataTables plugin (IV)


In the previous posts I demonstrated how to setup your application to generate a datatable component from your Notes view(s) and how to apply filtering & search capabilities to the columns.

In this post I will demonstrate how to build an external form to filter the datatable. I guess in most cases you want to provide some sort of search form and displayed separate from your table (left, right, top). For now we restrict the search form with input boxes.


I have applied some modifications to the application. The complete and final code you can view in my Github repository.


  • java class that works as a custom service bean
  • javascript library for initializing datatable
  • xpage to display the datatable

Let’s add a form

The first thing we will do is by adding a Bootstrapped styled form to the xpage:


Notice the following things:

  • The filter class for the input element
  • The data-column-index attribute for the input element

The filter class will be used to register events on:

$(‘.filter’).on(‘keyup change’, function () {
//clear global search values”);

The data-column-index attribute directs to the index of the corresponding column in the datatable.

With the form in place and the script updated we need to extend our java class so the values for the job title are included:

String job = String.valueOf(columnValues.get(10));
if (null!=job){

Let’s see the result

For example if I am looking for a person with firstname starting with Car.., from company Firm (something) acting as a host I get presented:


Now with the initial search form in place we will extend it with features to improve it’s usability…

Building a search function with DataTables plugin (III)


In the previous post about the datatables jquery component I demonstrated how to create input select controls for each column. In some cases an select control may however not be desired, due to the diversity of the entries in the column (e.g. track number, firstname, date).

Text inputs

In such cases you probably wont to use text inputs where a substring is being matched against the string entries in the column.

To achieve this our function to build the table have to be adapted slightly:

function initPersons(){

$(‘#persons tfoot th’).each( function () {
var title = $(this).text();
$(this).html( ‘<input type=”text” placeholder=”Search ‘+title+'” />’ );
} );

var db = $(“#persons”).DataTable();
var table = $(“#persons”).DataTable( {
stateSave : saveState,
fixedHeader: true,
“language” : {
“lengthMenu” : “Entries per page _MENU_”,
// “info” : “Page _PAGE_ of _PAGES_”,
“infoEmpty” : “No entries found”,
“infoFiltered” : “”
scrollY : yScroll,
“ajax” : “api.xsp/Persons” ,
“columns” : [
data : “firstname”,
“defaultContent”: “<i>Not set</i>”
data : “lastname”,
“defaultContent”: “<i>Not set</i>”
data : “company”
initComplete: function(){
this.api().columns().every( function () {
var column = this;

$( ‘input’, this.footer() ).on( ‘keyup change’, function () {
if ( !== this.value ) {
.search( this.value )
} );

} );

As a result under each column input boxes which column filter functionality are added underneath the columns:


Another Graph sample from Domino Explorer


In a previous post I dove into Domino Explorer, an XPages application that cans the Domino Directory and the Catalog by using the Graph capabilities in the OpenNTF Domino API.

In this post will describe another XPage in that application. Perhaps it helps to get a better picture on the Graph db and how to build an application around it using XPages, JavaScript, & Java.

Hopefully I will be ready writing before a European football final kicks off…


The xpage I discuss is allacl.xsp. Basically it displays at start a table with ACL entries for the entire catalog. When I click on an entry or row in the table I get presented a list of applications where the selected ACL entry resides in the ACL.

The result of the scenario above captured in the following screen:


As the image suggests the entry [Anonymous] resides in 4 applications. Let’s dive in a little deeper into the XPage to see how it’s done…

On document ready

The XPage contains a JS library whichs fires an AJAX call to collect the data for the DataTable object. The rest service resides on the XPage and is accessed via it’s pathinfo property. The restservice is bound to a custom servicebean which resides in the application.

The AJAX call does not provide a parameter to the restservice, so the java class will collect all the vertices of type DXACLEntry.class. For each vertice a JSONJavaObject containing name and level and placed in a JSONJAVAArray object. This array is placed in a JSONJavaObject and returned as a string to the restservice.

When the data is received in the DataTable object only the name property is placed.

The routing is visualized in the next image:


On row click

In the JS library for the DataTable object is also defined what should happen when a row in the table is clicked.

Here the name value for the selected row is used in a function that initiates a second DataTable object. Again a call is made to the same restservice. However now the name value is send as a parameter (“?name=” + name value).

The servicebean picks this parameter up (String name = request.getParameter(“name”)) and get’s all the vertices from the Graph with the provided name, matching the DXACLEntry (DXACLEntry aclEntry = graph.getElement(name, DXACLEntry.class)).

Similar as in the document ready event for each found DXACLEntry object a JSONJavaObject is created, now with some more properties (title,filepath, replicaId,server) and placed in a JSONJavaArray. This array is returned as a string to the restservice.

When the results are received by the DataTable object the four properties are displayed per column.



The scenario is that simple. The DataTable plugin is really a great plugin that does a lot for you and can save you multiple design elements (view controls) by defining in your code what you want in it as result and in which order.

Now let me enjoy my evening of football with a cold beer! Happy development =)



Re-Unite Gallery & FIX AMD loading for XPages


In my previous post “Another draw (unite gallery) in the waste-basket” I wrote the complication I had with getting the Unite Gallery to work properly within XPages.

It turns out that this is related to Asynchronous module definition complications within XPages., although you do not get error messages in your web browser console.

Fixing the XPages R9 dojo define.amd problem once and for all

Marky Roden wrote a post about a solution a while ago which was inspired by a x-code snippet Ferry Kranenburg posted.

The principle is quiet simple but saves you a lot of headaches:

  • duplicates define.amd to define._amd
  • deletes define.amd
  • loads the AMD enabled jquery plugin (successfully)
  • duplicates define._amd back to define.amd
  • deletes define._amd

Using a Theme

In stead of setting the fix for individual pages I am using a Theme to fix it (since I am using a Select2 combobox in my navbar header).

amd fix

Step 1 – Adding two JS libraries to your WebContent

These files contain the same code as in the XSnippet.

Step 2 – Load your resources via a Theme design element


As you can see I load my JavaScript libraries who use AMD within the two previous set up libraries.


As a result the buttons on the XPage containing the Unite Gallery work fine again !

Happy development =)


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!

context.getProperty(‘xsp.resources.aggregate’).equals(‘…’) working for resource and not resources definition

In a previous post I described a problem when implementing Font Awesome in conjunction with the Use runtime optimized JavaScript and CSS resources XSP property. The solution can be summarized as followed:

  • – Move the @font-face part in the font-awesome.min.css into 2 new CSS e.g.


  • adapt for minified version the paths to the fonts e.g.


  • load in a Theme design element the correct version based upon your XSP property setting:

context.getProperty(‘xsp.resources.aggregate’).equals(‘…’)   //true or false

This works for a resource definition but apparently not for a resourceS definition.

The following code

<resources rendered=”#{javascript:context.getProperty(‘xsp.resources.aggregate’).equals(‘false’)}”>
<resources rendered=”#{javascript:context.getProperty(‘xsp.resources.aggregate’).equals(‘true’)}”>

will load both files in optimized / non optimized runtime. Perhaps IBM can fix this?