In this example, I had several "control" fields on a form. These fields serve as indicators for the workflow process. I was working with limited screen real estate and wanted a way to make the workflow controls very evident and allow the user to rapidly navigate through them. It was at this point that I struck on the idea of creating a fixed width caption table that could hold these fields. I liked this concept very much, since it provides a separate "container" for each of the controls. By offsetting the fields from one another, the user is free to focus on one element at a time, which was important in this application because we wanted them to think about the choices they were making for each workflow option. The end result was a nice UI element that proved to be very usable...a win-win combo.
Here's what it looks like in action:
If you've not used a caption table before, it's quite easy. When you create a new table, specify the number of rows and columns and then choose the "Caption Table" option. The number of rows corresponds to the number of accordion sections that you will have, with each section containing the specified number of columns.
Most of the standard formatting properties for tables still apply with a caption table. To add the caption labels, use the "Special Row Options" tab of the table properties dialog. This process is very similar to setting up the labels for a tabbed table.
That's about all there is to it. For far more inspiring design uses of this UI feature, a quick search on Google will probably turn up some nice examples. If you want to do the same thing on the web, look no further than Rico, which provides a very nice and easy to use accordion effect (I use Rico as an example in one of my Lotus Developer2006 sessions).
For some additional caption table goodness, check out the following posts from Ben and William.
Ben Langhinrichs - SNTT: Accordion style views in Lotus Notes client
William Beh - Lotus Notes Categorized View using Rico Accordion
6 comments:
That's so compact. Very nice :)
Minimum height on rows is your friend with caption tables. You don't want the lower captions to move AT ALL as you flip between them.
In general, I have very mixed feelings about caption tables. You've used one perfectly here, because your sectional labels are so long. But usually, tabs are move obvious to the user and consume less overall screen real estate. Plus the bounding box on tabs makes them, I think, a little more obvious on the grouping.
I'd probably change my tune if we got more control on the actual caption formatting. If I could do a gradient in the caption background, for instance, so it would look rounded. (I need to send you some screenies of some aqua-style headers I've been doing lately, by the way.)
That's a nice looking form right there. I will definitely be attending your session at Lotusphere.
Very cool stuff! How do you get the caption rows to display a colored background?
I think I figured it out. You put the caption table inside of another table cell and change the color of that cell. Right? (among other possible ways, of course - this is Notes after all!)
@Don...yep, pretty much. In this case, I think the caption table color is blue and I placed new tables within each row. These tables have a white background, giving the effect you see.
Post a Comment