Wednesday, December 20, 2006

Quick Tip: Colored "OS Style" Field Borders

A colleague of mine recently asked me if it was possible to create fields that are OS style in the Notes client, but change the border of the fields to some color other than black. I always work under the assumption that there is some kind of trick, hack or workaround I can come up with when designing with Notes, so I played around with some ideas until I figured it out.

First, let's look at the OS style field option and what we get with it. When designing a field, you can choose to make it look more "Windows-like" (or "Mac-like" or whatever the flavor of your operating system) by selecting the "Native OS style" option. When you do this, you can control the formatting of the field slightly by manipulating the border style and setting the background color. However, Notes does not give you an option to manipulate the size of the border or its color.

Here's the trick for designing the border however you'd like. Instead of using the border style properties of the field, enclose the field within a table cell and set the border style of the field to 'None'. The border for the table then effectively becomes the field's border. Since it is just a standard Notes table, you can style it up however you'd like, changing the border weight, color, etc. Here's a few examples:

The design of the first one is borrowed from Trans-Siberian Orchestra's fan club sign up page. I changed the fields to be light colored orange with a dark orange border (by the's another great use for layers...putting fields on top of a background).

The second example is from an actual document library database, which shows a more subtle use of this effect. The borders of the field are light grey instead of black, which makes them blend better with the overall color scheme of the page.

The final example is pretty out there, but it shows what you can do if you experiment a bit. In this case, I gave the tables that enclose the fields a border style of "Image", selected an image from the database and increased the thickness to seven pixels. Quite an interesting effect.

Keep in mind that all of these screenshots are from the Notes client. Don't believe me? :-) Here's a shot in design mode (showing all of the relevant settings of course).

A couple of other things to keep in mind:

-If you want to control the width of the field, use the OS style and set it to a fixed width. Make sure to turn off the "Allow multiple lines" display option on the second tab. This will prevent the user from using a carriage return in the field.

-If you want your field to be able to grow as the user types in text, use the standard Notes style field and then uncheck the option to "Show field delimiters". If you choose to use this type of fluid design construct, make sure it will not mess up the formatting of your form as the table grows.

Overall, this is an elegant and easy to implement solution. Just how I like it.

Happy Holidays everyone!


Richard Moy said...

I have used the same trick a number of times. The only thing I would mention is that if you are trying to display a combobox it is better to have the "Align control's base line with paragraph's" deselected. If not, it can overflow over the table border.

Chris Blatnick said...

@Richard: Indeed, if this option is turned on, the bottom border of the table will seem to "disappear". Luckily, this is off by default, but if you are modifying an existing design and find this problem, deselecting the option will resolve it. Thanks for pointing this out!

Ed said...

We are not worthy... WE ARE NOT WORTHY!!!!
Chris, you continue to amaze with your ability to breathe new life into the Notes client.
A nice x-mas present for the community would be to roll some of your greatest hits into a sample DB.
Keep up the great work.

Richard Moy said...

@Ed and Chris,

I told Nathan that I will get a database to him before Lotusphere that shows some of the tricks that we use in our IBF products to demonstrate things that you can do with the Notes client that I have not seen anywhere else (of course I could be wrong). I will explain some of the tricks that we use.

Nathan T. Freeman said...

I'm going to have to send you the template where I already do this just to prove that... well... I already did it. :-)

Actually, this is an old school technique that dates back to v3 days, before there was even an option for native OS style fields. I remember seeing someone document it in the partner forum years and years ago. It had never occurred to me how much the newer table border styles could add, though. The picture stuff could give you rounded-corner entry fields with a little work.

The biggest problem I experienced, though, was that they don't really fit well with the native OS fields. If you're doing time/date entry you pretty much HAVE to use the native style, in which case it's pretty much impossible to get good alignment with table-based field borders. Also, if you right align the field inside the border, you'll get weird artifact bugs -- you can't tell the cursor is in the field because it blinks ON THE BORDER, instead of inside it. This is incredibly annoying. Though maybe I can tweak that with some of the new border controls I've been tinkering with.

Chris Blatnick said... need to prove prior art...I always assume that someone already did it and probably better than me! :-)

The good thing about getting this out there is that the people who weren't around in the ancient days (*snicker*) can get some good ideas. :-D

What excites me about the response on this blog and Nathan's lately is how many people are coming out of the woodwork showing an interest in interface design and even how there really ARE good designs out there! I'm especially looking forward to the BOF at Lotusphere to hear about other people's experiences and ideas in this area.

Hopefully, we'll have a cool database full of UI goodies that you can download after our Lotusphere session...

Nathan T. Freeman said...

Gotta love cascading inspiration effects. :-)

Richard Moy said...

Chris and Nathan,

Do you two know if Mary Beth Raven from IBM is planning to attend your session? It would be nice if she see some examples of the interfaces that are being developed for the Lotus Notes client. Hopefully that would drive IBM to make certain improvements to the design of future Notes client releases that are more towards custom applications than your standard mail and calendaring(bug fixes also would be nice).

Nathan T. Freeman said...

Given that we're already scheduled to repeat the session, I can't imagine she'd skip them both. But I'll get a chance to talk to her face-to-face before the session, so I'll try to make SURE she's going to be there.

Honestly, though, she has a lot less control over what we'd be talking about than you might think. Getting Eisen or Reckling fired up about what we say would yield much bigger dividends, I think.

Chris Whisonant said...

And to think I was just going to say that I was playing a Jackson guitar before I knew of TSO!!! :)

Here she is:

Will have to look at this more when I get back to the office.

Patrick Kwinten said...

here is a must read page with much more CSS tips