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

01/06/2010 01:04 AM by Chris Toohey

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.

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.

Synopsis

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:

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.

Build

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):

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):

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:

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:

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:

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

-- and make it look like this:

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