I’m speaking at MWLUG about…

… XPages and DataTables (the jQuery plugin, not the XPages data source).  This is my first opportunity to speak and present at a technical conference so I’m running the full gamut of emotions – from excitement to nervous and back again!

In  my session, I’m hoping to share my experiences with using DataTables as the primary tool for displaying view data fed via REST services in my XPage applications.  This experience led to a single, configurable custom control that, in conjunction with a Domino view administration tool,  can be dropped into any XPage or custom control where view data is needed.  My goal was to create less back-end views and provide more UI functionality while minimizing the need to make design changes when views need to be added or updated.

DataTables is incredibly powerful, and I’ve found that every time I thought I was going to have to customize something, inevitably, DataTables had that functionality built in, or at least had tools that made it easier to implement.

Hopefully this topic interests you as much as it does me and I hope to see you there!


XPage loading slow? Check your document datasource

tl;dr – If you have the “compute” option of a document datasource enabled, make sure:

  • The underlying form does not have fields perform a DbLookup to a view that has @Today or @Now in a column/selection formula.
  • If the form has embedded views, make sure the column/selection formulas of the view do not utilize @Today or @Now.


For the past year+  I’ve been in the midst of modernizing a very, very large Lotus Notes application that is comprised of many databases.  Over the past few weeks, as I started building out the next phase, one particular XPage was loading extremely, EXTREMELY, slow, like in the neighborhood of 8 seconds to open.  Not good.

Since we are modernizing an existing application (which is the lifeblood of the company), we are operating in a co-existence environment.   This means dropping the XPages layer on top of the existing environment versus building and architecting an application from scratch.  So in this case, the XPage in question has a document datasource that utilizes an existing Notes form.

After examining the XPage and determining that the performance issue was not there, I turned my attention to the underlying form.  I do have the “compute” option turned on:



Now, keep in mind I did not build this form originally, so I am getting up to speed with it’s inner workings as I’m building out the XPages side.

My discovery process went something like this:

“There are 3 embedded views.  Ok.  No Problem.  Lots of Notes forms have embdedded views.”

“This column of the first embedded uses @Today.  That’s bad.”

“Wait … every embedded view has a column with @Today?  WTF!!  OK, we can deal with this.”

“This field is doing a lookup to a view with @Today … and this field … and this field.”

Using @Today and @Now in a view is bad enough … but six times on a form?  OUCH!

This was a flat-out performance catastrophe.  One of the first performance tips you learn in Notes Client development is do not use @Today or @Now in view column or selection formulas unless you absolutely have to.  Even then, consider running an agent nightly to update the view with a hard coded date instead.

Luckily, the issue was discovered and handled, reducing the page load time from 8s to ~50ms.


My first #MWLUG … what was I waiting for?

Finally back home and reflecting on the past week and how much I enjoyed MWLUG 2015.  My only regret is I didn’t attend sooner!

A sign of a good technical conference is having to make tough decisions on which sessions you want to attend and I found myself in that position more than once over the past few days.

A sign of an incredibly COOL conference?  … DRONES!

I accomplished all my goals for the week – taking away things I can use right away, getting ideas for the future, catching up with people, and of course meeting new people.  Everything was capped off nicely by winning the Sonos from LDC VIA.  The first thing I did when I got home was hook that baby up!

Thanks to Richard Moy, Lisa Duke, and Darren Duke (and anyone else I’m missing) for planning and executing an incredible conference.  I can only imagine how much work goes on behind the scenes throughout the year to make this happen.  I’m already looking forward to next year in Austin with great anticipation.

They say everything is bigger in Texas.  I have a feeling MWLUG 2016 will be too.

Boot your alerts in the … with bootAlert

Unfortunately, due to the sudden illness and ultimate passing of a family member in the fall, it has been quite a while since I last blogged.  Hopefully, this post finds me getting back on the blogging horse to contribute some content to the Xpages/Domino community and bring some ideas I had been kicking around to fruition.

Today I am releasing bootAlert, a simple XPages custom control that allows developers to add configurable, reusable Bootstrap alerts to their apps without having to add any additional plugins.  You should already be using Bootstrap/jQuery in your application in order to use this custom control.

For the past few months, in working on our application migration project, I built a configurable Bootstrap alert custom control.  I found myself continuing to add features as different needs arose.  So, I thought I would release it to the community.

Why bootAlert?

  • bootAlert can be triggered from both server and client-side Javascript
  • bootAlert can use Font Awesome icons
  • bootAlert can be turned into a Growl-like message on-the-fly
  • bootAlert is dynamically configurable – one action may require the 'success' class and another may require a 'warning' or 'danger' notification.  One control can be used to display all three.
  • bootAlert can be customized with css
  • Add as many bootAlert controls to your page as you want
bootAlert with view.postScript

bootAlert can be triggered from server-side js with view.postScript()

bootAlert let's you add Bootstrap Growl messages

bootAlert let’s you add Bootstrap Growl messages to your application


I plan on submitting this as an OpenNtf project, but for now you can find a demo, as well as download bootAlert here

A github repo can be found here.

Getting Started

Getting started with bootAlert is easy.  Simply:

  • Download the demo database
  • Copy the custom control and script library into your application (or copy the contents of the script library into your existsing client-side script library)
  • Drag the custom control onto your xpage and populate the alertName property
<xc:ccBootAlert alertName="alertDemo2" id="ccBootAlertDemo2"></xc:ccBootAlert>
  • Call bootAlert from client-side js …
// Client side js 
var o = {}
o.title = "Client Side";
o.body = "This alert is being generated by client side javascript";
o.alertType = "danger";
o.alertIcon = "fa-calendar fa-lg"
  • or call bootAlert from server-side js by putting a value into a requestScope variable and making sure the bootAlert control is part of the partial refresh target:
// Server side js 
// This method assumes the alert is part of a partial refresh target
var o = {};
o.title = "Server Side";
o.body = "This alert is being generated from ssjs";
o.alertType = "info";
// The requestScope var name should match the alertName given to the bootAlert control
  • Finally, you can use view.postScript() to trigger a bootAlert:
// Server side js
// The alert custom control does NOT need to be part of a partial refresh target
// The parameters being passed to bootAlert need to be serialized
var o = {}
o.title = "Server Side > Client Side";
o.body = "This alert is being triggered by client side js called from server side js";
o.alertType = "warning";
o.autoClose = false;
view.postScript("bootAlert.show('alertDemo2'," + toJson(o) + ")");

I hope others find this control as useful as I have in my projects!

Modernizing A Notes App With XPages (MANA-X) Part 1 – Introduction

A few weeks ago, I started a new position. For this position, I was hired specifically to lead the transition of a key Lotus Notes client application into the XPages world, where modern capabilities and UI can be merged together to create a great user experience and better support the business processes going forward.

Actually, this application is more than just a “key” application. It is THE application. Well, technically, it is several applications, or modules, all tied together under one umbrella, which have supported just about every aspect of a business that has tripled in size in the last 10-15 years.

While there is an urge to jump right in and start coding, there are many things to consider ahead of time:

  • Technical – Which framework(s) to use? Getting the development team up to speed on source control for better code management. Developing for IE9/IE11.
  • Cultural – How to introduce users to a modern web application when they are used to working in the Lotus Notes client?
  • Infrastructure – Keeping users productive with high availability. Making sure remote users do not have performance issues.

This is in no way intended to be a comprehensive list; These are just a few of the issues we’ve started to discuss as a team in the early stages of project planning.

Over the course of the coming months (years?), I’m hoping to share our experiences of moving this massive application to XPages and all of the successes and challenges that come with that (as much as I can, anyway).

Disclaimer: Any opinions and views expressed are my own and not necessarily those of my company. This series is intended as one company’s experience of moving an application to XPages and not a definitive guide on how to migrate an application to XPages.

XPages tip: Using jQuery class selectors with hidden inputs

If you cut your XPages teeth by using the out-of-the-box-included dojo libraries, then you are probably intimately familiar with dojo.byId(“#{id:myElementID}”) to locate elements on your XPage based on the id attribute.

After starting to weave jQuery into your projects, you probably realized pretty quickly that the jQuery id selector syntax of $(“#myElementID”) does not work well with XPage component ids. But of course there is a solution for that – Marky Roden’s XSnippet which wraps the jQuery ID selector function in a XPage version.

Due to the above issues with getting elements by ID in jQuery, you probably started using class selectors such as $(“.myClassName”). This is all fine and good – until you go to add a class to the properties panel of a hidden input control:

As you can see from the screenshot above, there is no place to enter a class name in the properties for a hidden input control. Seems kind of silly, doesn’t it? It’s a field. Fields have classes. I should be able to add a class to a hidden field. Apparently not.

Luckily, there is an incredibly simple way to do this using the attrs properties in the basics section of the properties panel:

  • Add a new attribute by clicking the plus sign
  • In the name field, enter “class” (do not add the quotes)
  • In the value field, enter the name of your class, for example, “myClassName” (again, no quotes)

Now, you should be able to access your hidden input using a jQuery selector.

My first OpenNTF project – Dojo Name Picker

A few years ago I created a Name Picker for an XPages project I was working on at the time.  The application had several fields that required the selection of users from the address book, but the available options at the time did not fit the bill.  In addition, this was the first XPages application for this user base after being firmly entrenched in Notes Client applications for many years.  As a result, there was a need to provide some functionality that helped build a bridge from Notes Client to web/XPage applications.  Being able to select users from an address book in a similar manner as the Notes Client was a good place to build this bridge.

Multi Select Name Picker

Multi Select Name Picker

Single Select Name Picker

Single Select Name Picker

Why not just use the ExtLib version?

When I first started building this control, the ExtLib version did not exist yet.  Even after ExtLib was released, the environment where this was born did not have ExtLib installed on their servers.  In my testing against the ExtLib name picker, this version outperformed it using the 40k entry address book, fakenames.nsf, as well as provides functionality that does not exist in the ExtLib version.

The key features of Dojo Name Picker 1.0 include:

  • Ability to choose People, People & Groups, or just Groups.
  • Multi Select via a dual column dialog.
  • Single Select via a single column dialog.
  • Lazy loading of additional entries when scrolling up or down.
  • Only creates one dojo dialog widget no matter how many names fields are needed on a form.
  • In Firefox and XPiNC the dialog will also display the associated icon for an entry (IE and Chrome do not support option tag background images).
  • Ability have the name picker execute a function with the selected value(s) being passed to the function as a parameter.
  • Ability to specify a partial refresh target on dialog close.
  • No dependency on ExtLib.
  • Will work on 8.5.3 and above (will probably work on 8.5.2 but this release has not been tested on that version).

You can test the name picker for yourself via a live demo here.

You can view this project on OpenNTF here.

Future Enhancements

While I feel this is a good, solid release, there are some improvements I would like to make:

  • Bootstrap version (coming soon!) .
  • Improved caching.
  • Ability to return selected items as a JSON string.
  • Ability to define additional fields to pull from the NAB
  • Support multiple address books

Thanks for checking it out!