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 way...here'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!

Quick Tip Update: Images In Views

Well, I had a couple of questions on how I made that view in my last post. Here it is again, just so we're all talking about the same thing:

It's not such a trick to get this working...more just playing around until you get it looking like you want it. In this case, the view design has four columns. The first is the categorized column which shows the Artist and CD Title. In this case, I'm using it as a "header" of sorts. The second column contains the CD cover image (which is the image resource referenced in the "txt_Image" field on the document) as discussed in the previous post. The third column, which I guess is what people are asking about, is just set with a multi-value separator of "New Line". In order to center the text, I just concatenated the various fields together, with some null values in front. Here's what it looks like in Designer:

There's one more column in this view and this is kind of a trick. Perhaps there is a better way to do this. If so, please let me know. In the design, the number of rows is set to 9. However, the size of the row is determined by the column with the largest text size. In this example, my icons were too big and were being cut off since the rows weren't tall enough. To correct this, I inserted a column at the far end which has a null value. The text properties for this column are important, though, since they control the height. I left the font as "Default Sans Serif" and changed the size to 130. Upon doing this, voilà...the perfect spacing I wanted.

The track listing is provided via an embedded editor. The form that is being used has all of the fields hidden when embedded except for the rich text field that holds the track info. Here is the form in design mode showing the embedded editor and embedded view:

In order to associate the embedded view with the embedded editor, just set the embedded view's Target properties to the same name as the name of the embedded editor. When you do this, clicking on the entry in the view will show the corresponding document in the embedded editor, which in this case displays the track listings. Tre cool! :-)

Quick Tip: Images In Views

File this one under "stuff I thought everyone knew, but turns out some people missed it". With all the talk about the new view icons over on Mary Beth Raven's blog (and subsequent spillover to Nathan's), it reminded me that I wanted to do a short post about using your own custom icons in a Notes view. I often make my own view icons so that the context more closely represents what my application is all about. At the Lotus Developer2006 conference in Vienna, I showed a demo database that happened to make use of this idea. I didn't address the technique, nor did I mention anything about the view icons, but I was actually asked on three separate occasions during the conference how I "got those icons in the view". Thus, today's Quick Tip is how to do just that. Luckily, it couldn't be easier, which makes for a nice Friday post! :-)

To use your own custom view icons, you need to drop the icons you want to use into the database's Image Resource section. Once your icons are there, create your view column and set the property to "Display values as icons", Now here's the trick...instead of referencing a number (which allows you to use the built-in Notes icons), simply enter the name of an icon in your Image Resource section (e.g. "newdoc.gif"). Of course, usually you'll want to use a formula to calculate this. Perhaps you have different status icons that represent the state of a document. Just setup the column as you always do and reference the image names rather than the numbers and you're good to go. Another nice thing about using this technique is that the name that you give the image resource will be shown to the user when they mouse over the icon. Thus, you could write some nice descriptive text such as "This document is ready for review".

Creating your own icons is cool, since there are some neat things you can do. Here's an example of an embedded view that has CD images. It's in a form with an embedded editor, so that when the user selects the document, they also see the track listing without actually having to open the document.

If you get creative, you can really extend these ideas to make some powerful apps. For example, you could allow the user to attach a file that would be used as the view icon for a document and then you could have code to extract the attachment and automatically make it an image resource so it could be shown in the view (several folks have done this with DXL...a quick search should turn some up).

Well...I hope you all have a great weekend. Cheers!

Lotusphere BOF: Designers Unite!

Hi Folks. Along with the session that Nathan and I will be doing at Lotusphere 2007 (BP101 - Designing the User Experience: Why Your Interface Matters), we're also proud to be your hosts for one of the Birds of a Feather sessions.

There are a lot of Notes developers out there that have been putting nice UI designs together and even more that are interested in the topic. So please come join us for BOF202 - Designers Unite: Developing Innovative Interfaces In IBM Lotus Notes and share your thoughts, experiences and expertise. We're scheduled at 7AM on Tuesday the 23rd in Y&B GH Salon VI.

Birds of a Feather sessions are designed to allow like-minded individuals to come together and trade ideas, ask questions, etc. Interface/user experience design is an especially great topic for a BOF, since this is such a fast moving and dynamic field. If anything, the whole "Web 2.0" craze has ignited a lot of innovation in the UI design arena, and provides us with a lot of material to discuss.

I've included the BOF description below. If you think this kind of thing is up your alley, then we hope to see you there!

User Interfaces…they’re not just about pretty pictures and matching colors. This Birds of a Feather session is intended to draw together IBM Lotus Notes developers that are passionate about usability and user interface design. Learn from others how interface design can be integrated into your development methodology, and get real world insight on how to build more exciting and dynamic interfaces that can make users more productive. Take the opportunity to share ideas and best practices about a topic that is becoming more important on a daily basis as users become more savvy, sophisticated and demanding.

To The Person That Found My New Blackberry...

...and returned it: THANK YOU, THANK YOU, THANK YOU! You've reaffirmed my faith in humanity (at least for this week) :-)

Although they will most likely never see this, I have to thank the person(s) that returned my Blackberry. On Sunday, the family and I trekked out to our favorite Christmas tree farm about an hour and a half from our house. We've been going there for many years...great place. You take a horse-drawn wagon ride out to the fields, look for the perfect tree, chop it down and bring it home. This year the pickings were pretty slim, so we walked way to the back of the farm. Out of the blue, I feel the telltale burst of a snowball against my back. Soon, I am being assaulted on all sides by my kids and it's on...a massive snowball battle thus begins. We go at it hard core for about 10 minutes before everybody tires themselves out, then it's on to continue our search for the perfect tree. Eventually we give up and decide to head back to the barn for a picnic lunch by the fire. As we start to pack up, I look down as I put on my jacket and notice my phone holster on my belt...minus the phone!

Well...stupid me, I forgot to remove my 4 day old(!) Blackberry 8703e from my belt before getting out of the car. In the ensuing chaos of the snowball battle royal, it must have slipped out of the holster and ended up in the snow. Upon realizing this, my son and I run out to the fields and begin to retrace our steps, but to no avail...the phone is lost. Dejected, I give my name and number to the owner of the farm and ask them to call if by any chance someone finds it.

After getting home, I notice a message on the answering machine. It's completely garbled, but we can make out a few words. It sounds like a couple of little kids and a dad and I swear we hear "blackberry" and "does it work?". So, it appears someone may have found it and hit my home speed dial by accident. I continue calling the phone, but there is no answer, so I give up for the night. Well...imagine my surprise when I get a call from the owner of the place later that evening. Someone did indeed find it and they turned it in when they got back to the barn. How cool is that!!! I got it back yesterday and amazingly, not only does it work, but it doesn't have a scratch on it!

Anyway, this story obviously has no bearing on Notes at all, but I thought I'd share since, even though we sometimes lose sight of it when we listen to the never ending bad news from the media, there are still a lot of good people out there who try and do the right thing. Here's to them...Cheers!