Your Development & Design Resource

Using Tables, Image Resources, and CSS to create functional Labels and Fields in Lotus Notes Client Applications

The majority of the Lotus Notes Client applications that I run into onsite are (how shall I put this) ... not the prettiest. Most of them work just fine -- don't get me wrong -- but their appearance doesn't scream cutting edge. And that, quite frankly, greatly impacts the perception not only of the given application, but also that of the platform.

Lotus Notes Client 4.6 Personal Address Book Location Form. ... needed a 
non-inflammatory example!

With almost constant talk of Dojo-enhanced XPage UI Development, it's easy to overlook how a simple facelift to an existing Lotus Notes Client Application can greatly impact not only user experience, but almost certainly change their ideas on just what is capable in the Lotus Notes Client.


In this tutorial, we're going to review a simple yet effective method for combining Tables, Image Resources, and Lotus Notes Client-friendly CSS to create visually-appealing and functional Label & Field combinations. You'll be able to use the techniques discussed here to improve the user interface (and the user experience) of any existing Lotus Notes Client Application.

First, we'll take a look at our desired end result:

quickie mock-up, after a combination of Tables, CSS, and Image Resources!

Sure, green might not be your color, but I think that the second version of the Location Form has more visual pop than the older Show Field Delimiters-laden design.


To start, we're going to create a pairing of two Tables - one that will act as the parent container, and a second that will act as the child container.

(Note: In this tutorial, I'll show how you can create a plain-text entry Label & Field combo as well as a Multi-value picker-enabled Label & Field combo. For this part of the tutorial, I'll just show you the most complex of the Label & Field combos.)

The parent will consist of a single row, two (2) column Table (Fig. 1, below):

The parent/child Table Label and Field combos...

From here, I typically set the Table width to fit the margins, set a fixed length (0.85 inches in the above screen-capture), and vertically-center the contents of each Table Cell.

The child Table (Fig. 2, above) we'll set to the fit with margins (as the parent Table will act as it's horizontal bounds). As mentioned, this child Table will contain a picker, so we'll want to create a Table with two (2) columns.

Notice the solid gray border around the child Table. This border will act as the boundaries for the actual Field Element, which you can add as well.

For the border of the parent Table, we're going to use an Image Resource (see below):

Right-click and Save As... to download!

Pretty basic really, this image - named Label_Border.gif, will be used by our Tables as the Label and Field container. Once this image is imported into you Lotus Notes Client Application as an Image Resource, we will modify the parent Table Border Properties:

Table Properties - Border Properties

Now that you've added the borders, let's play with the fonts and colors... which is where our Lotus Notes Client-friendly CSS comes in.

First, we'll create a Stylesheet Resource with the following CSS:

td.label {
  font-family: font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 7pt;
  background-color: #CDEB8B;
td.fieldbackground {
  font-family: font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  background-color: #F5F5F5;
td.field {
  font-family: font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  background-color: #FFFFFF;
td.usefont {
  font-family: Webdings;

After adding the Stylesheet Resource to our Form Design Element, we simply add these Table Class Attributes to each of our Label & Field combos:

Color-coded to Class parent/child Table Label and Field combos

Simply put your cursor in each of the highlighted areas and add the correlating Class Name to the Table and Table Cell HTML Tags Properties:

Table and Table Row HTML Tags Properties

Color Cell HTML Tag Class
Red label
Blue fieldbackground
Orange field
Green usefont

Once you've finished, you'll be able to take this:

Domino Designer rendered Label and Field Combos

-- and make it look like this:

Lotus Notes Client rendered Label and Field Combos

It's a simple change really, and something that can improve your existing Lotus Notes Application User Interfaces (once, of course, you tweak the visual to your preference).

As I've mentioned, I've used this technique a lot over the past few years in many different applications. In fact, I use this technique (and exact combination of Tables, CSS, and Image Resources) in my Showtime, Time Tracker, and Abbr OpenNTF projects!

Example Lotus Notes Application Download

Lotus Notes 
Client Label and Field Example Application Download

About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.

More from is powered by IBM Notes Domino XPages & hosted by Prominic.NET

Contact Us

Use our Contact / Feedback form or one of these email addresses:

Creative Commons License

Except where otherwise noted, by Chris Toohey is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.