IBM Lotus Notes Domino Form Element Hacks

02/22/2010 05:45 PM by Chris Toohey

Hacks are ugly, they are unsupported, and they are often totally necessary in IBM Lotus Notes Domino Web Application development! I thought that I'd take the time to discuss several of those hacks -- required for B.XP. LND App Development -- that can get you the desired functionality for your applications and the desired user experience your customers demand!

While IBM Lotus Notes Domino's Rapid Application Development techniques are both amazing for quick-to-create collaborative business solutions and (let's say) well intended, it's HTML Form Element-generation for any Form Design Element can be extremely frustrating.

What's the big deal?! you may ask - if you're creating a Form Design Element, chances are you're using it to Create, Read, or Update a NotesDocument. The problem with IBM Lotus Notes Domino's RAD auto-generation of the HTML Form Element is when you're not using the Form Design Element for NotesDocument CRUD, but rather for the rendering of the overall NotesDatabase Domino Web Application User Interface.

And if you're still asking What's the big deal?!... then consider this: since HTML Form Elements can not be nested, that single HTML Form Element must contain every individual HTML Form-like function in your dashboard.

Let's take a look at an example dashboard-style UI:

And let's look at the same dashboard-style UI highlighting all of the HTML Form Elements:

We have a Search HTML Form Element, a New NotesDocument Sidebar/Widget-style HTML Form Element, and a Selection Preview HTML Form Element.

As mentioned, HTML Form Elements can not be nested, so the Domino RAD auto-generated HTML Form Element basically makes creating an individual Search, New NotesDocument and Selection Preview HTML Form Elements impossible... without various hacks.

Hack #1: Live and Let Live

There's nothing stopping you from keeping everything on the same Domino-generated HTML Form Element and submitting only those data Elements (Inputs, Textareas, Selects, et al) via embedded HTML IFrame Element or via AJAX. Sure, you can't use a submit(); call anywhere without worrying about submitting a bunch of garbage NotesItem values... but it's doable.

Still... it's not an approach that I prefer, only because it's very easy to forget or include the wrong data Element, not to mention that the above UI mockup shows that New NotesDocument and Selection Preview HTML Form Elements that -- logic would dictate -- share the same HTML Element Name. Bad form (heh) all around I'm afraid!

Hack #2: Kill the Domino HTML Form Element

There are several ways to use this method, but they all come down to the same thing: you end the Domino RAD generated HTML Form Element (via </form>) before you create your own HTML Form Elements.

To perform this hack, simply enter </form> as the first line of markup in your Form Design Element. This kills the Domino HTML Form Element and allows you to create -- using the above UI as an example -- 3 more HTML Form Elements of your own.

This technique works great... unless you're reusing old JavaScript which relies on forms[0].

Not that big of a drawback, of course, but certainly something to consider.

Hack #3: AJAX-friendly HTML DIV Injection

My preferred method, which I've previously discussed here, would have you create an HTML DIV Element before Domino has the chance to create it's own HTML Form Element.

So, in the HTML Body Attributes of your Form Design Element, simply add the following:

{><div id="popup">&nbsp;</div}

Pretty simple, huh?

This creates a popup HTML DIV Element before the Domino-generated HTML Form Element... which becomes really handy when you want to load DHTML popups.

As for the above UI example, there's nothing stopping you from building upon this technique and pre-loading empty HTML Form Elements prior to the Domino auto-generated ones, and then using AJAX for population and CSS for absolute positioning!

Of course, IBM Lotus Notes Domino XPages makes all of this moot, as you have the ability to - via a toggle - tell the XPage to not auto-generate it's own HTML Form Element...

Still worth knowing about though!