Yesterday I received an email from Socialbiz UserGroup (I highly recommended to join this UG) with some updates regarding Bootstrap. Among one of the updates is the pre-announcement of Bootstrap 4. One of the main new features in BS4 turns out to be Cards.


Cards? What’s new about that? In my current development project I am using cards to display content in a container:



Components not Cards

And in a long ago blast (year 2002) we were already using cards:


Material Design

Excuse me, by that time we called cards ‘components’. Heck we were even using Material Design principles with layered information:



If you want to take a look at web design early 2000’s or you want to get inspiration how to set up a guide for your application developers  here is a link to a style guide.

Meanwhile I will be looking forward to the upcoming updates in Bootstrap 4. Nevertheless I welcome the ability to work with standardized definitions of cards =)

grouped cards

Links of interest

Adding search to an application with XPages interface (quickly)

For a project I was asked to deliver a new user interface for the web browser with the help of XPages. This included a search functionality.

First step: Look on OpenNTF

OpenNTF is a great resource to check if someone has done development before and has made the code available for public.

Here are some results that offer some form of search out of the box:

  • Advanced Search XPage Control (link)
  • Xpages Multi Database Search Custom Control (link)
  • Xpage Search And Tagcloud control (link)
  • XPages Basic Search (link)

I decided to go for the Advanced Search control. In case I have missed a great project on OpenNTF that provides a good search please drop a line in the comments.

Step 2: Modification

The Advanced Search control did not use any fancy from the extension library. So instead of the viewPanel control I decided to use the dataView control, plus the tooltip control to reduce the initial amount of text on the screen. Then I added some pagers from the extension library control again and voila here is the result:


So my search is ready in a couple of hours. Who says XPages is not rapid application development?

Thank you

A big thank you to all those who contributed their work to OpenNTF!

Download: Twitter Bootstrap in Domino Blog

Have you sometimes the feeling that in case you know too much it may be used against you?

Recently I posted how to include Twitter Bootstrap in the IBM Domino Blog template.  Some time ago I blogged frequently about administrating that same Blog application.

From my Twitter Bootstrap post I received some questions from people for help so the easiest way to assist would be to make an example application available for downloading. The NSF contains all the documents that are needed to utilize (or get started with) Twitter Bootstrap within a Domino blog.

I also added some sample blog posts and link documents that refer to websites for education and resources (themes).


Here you can download the example:  link.


  • Extract the file.
  • Sign the application with proper ID.
  • Apply proper ACL settings.
  • Open the Configuration document and apply correct settings.
  • Launch the application in browser.
    • In case the HTML layout is rendered properly I suggest to save ALL documents under HTML Templates section.

Good luck!


A document list (~ Notes view)
Mobile display

Application connections

Yesterday I broadcasted a presentation I wrote that describe all the Notes applications we have that guide developers in their development projects. Think about applications in the following categories:

  • Standards / Guidelines
  • Templates
  • Components
  • Resources
  • Tools
  • Knowledge
  • IBM resources
  • Project
  • Registries
I was pointed by a colleague of the existence of an application that was not listed.
The database contain documents that describe the relationship from 1 design element in an application with another design element in another Notes application. At the moment the registration is a manual process so we had a discussion how much business value it would have to have all connections for all applications in our domain registered?
Another question that rose:
How to get those connections? A connection can be in @Formula, LotusScript, JavaScript, Java, Text (as in HTML) etcetera. Would there be scripts available (free, commercial) who can do this job? Are there products/services who deliver the same information?
Is there a common desire in your organisation for these kind of information and how did you solve it?

The Woork Handbook

One of the Blogs I like to follow is Woork by Antonio Lupetti. Antonio writes about web design and web development. His articles contain appealing tutorials and great, practical example code.

A must read for Domino developers.

Last month he has bundled his articles bout CSS, HTML, Ajax, web programming, JavaScript frameworks and other topics about web design in The Woork Handbook, which you can download for free:


The Woork Handbook
The Woork Handbook

Can we see this as a trend ‘bundled blog-articles’?

Great UI examples for LN applications (recap)

Some time ago I was asking for some examples of great UI’s for Lotus Notes applications. All this promote the upcoming roll-out of the Notes 8 client in our organization.

Too bad I did not receive so many examples but the ones I received were very helpful and food for thought.

Criteria I would like to set for a great UI is that it should look:

  • similar in both Notes 8 standard (Java) and basic configuration
  • familiar to the PIM applications
  • like a Notes 8 application

One great help was the document ‘User experience guidelines for IBM® Lotus® rich client applications and plug-ins‘ written by Mary Beth Raven. On Inside Lotus you can also download a example discussion template so you can see yourself how the new templates will look like (in your Notes 7 client).

Also Martin Vereecken wrote a usefull tip about mimicing the action buttons from Java views.

Well here is my so far so good result:

UI example
UI example

Nothing ‘spectaculair’ but going to the guidelines document and applying the rules in an application brings a lot of ‘logic’ and consistence among other applicatons to the end-user.

One guideline had my special attention:
Put actions in the Actions menu and action bar. Do not put actions in the outline unless the action is directly related to one of the views or folders.
Normally I use an outline for actions that are so general that I want to have it everywhere available (like opening a configuration profile). Therefor I added a header with tabs. One is called ‘Menu options’ where I provide a dialogs with actions that are related to certain userroles (admin, editor, reader).
I also added a ‘Using’ and ‘About’ tab in the header to push our developers to provide instructions and general information about the application. Something that is often lacking.
For the ‘menu’ or ‘outline’ I would like to use collapsible tables like in the OpenTV project on OpenNTF but that is still bugging me
Your contribution is still welcome =)