Thursday, October 23, 2008

SnTT: Quick Follow-up To "Universal Toolbar"

It seems some folks liked my idea from last week, especially the example screenshot showing a drop down menu in this "universal toolbar" area.

I received a comment and a few e-mails asking how this was done. Well...I actually wrote this up (along with a sample database) a couple of years ago, so today's show and tell will be a cheat, as I am just going to link you over to that entry. With that, here you go. Enjoy.

SnTT: Cascading Navigation In Notes

Editor's Note: The sample database that is available for download also includes all my experiments using layers to create cascading menus. Remember...Lotus Notes is like an's got layers! :-)

Labels: , , , ,

permalink | leave a comment

Friday, July 20, 2007

Branding The Action Bar

When you are designing a Lotus Notes client application and are using action bars with your forms and views, you should take care to format the action bar so that it becomes a harmonious part of your design. That is, make sure you use colors and borders that complement the layout of your UI rather than compete with it. If you normally just leave the default settings (especially "System" gray), then I'm definitely talking to you. ;-)

Nathan and I have talked a lot about color palettes, complementary colors and stuff like that in the past, so I'm not going to say anymore about that here. However, I did want to present an idea that might be interesting to you in certain cases.

Sometimes, it is desirable to create a certain "brand" for an application. Perhaps it is a CRM suite or some other application that you want to make a little unique. One way you can accomplish this in a fairly easy and unobtrusive way is to use the real estate of the action bar to display a logo, picture, etc. Here's an example...

A Close Up

Now that's just a quick example I threw together to demonstrate the idea. Normally, I'd use a more subtle color and graphic. Here's an shot from a real application, in this case my modified document library template.

Another Close Up

Adding this image to the action bar is very easy. Probably most of you know that in the Action Bar properties, you can specify an image resource that will be used for the background of the action bar. If you want to align the image along the right edge as I have done here, there are a few requirements:

1. Make sure that the graphics that you place within the image are in the last 1/3 of the total image width.

2. Select "Center Based Tiling" as the Repeat option.

3. Adjust the height of your action bar as necessary.

OK...that first requirement is strange, but it works.

As soon as you overlap 33% of the width, it leads to undesirable behavior like that shown below.

If you want the color of the action bar to show through, make it a transparent graphic. Here's the same example as before, with a transparent image and the background color of the action bar set to a light purple (yeah it's ugly ;-).

If the image is the correct size, then you can re-size the Notes client window and the image will stay right aligned as you do so. It might take a little playing around with at first, but if you follow the three rules above, this can be a neat little trick to add to your client UI design bag.

Have Fun!

P.S. For more action bar fun, check out Kevin Pettitt's much cooler post about Two-Row View Action Bars

Labels: , ,

permalink | leave a comment

Thursday, June 01, 2006

SnTT: Cascading Navigation in Notes

Hi again. I'm often asked by fellow developers how a particular UI technique can be applied in Notes. I really enjoy the challenge of rethinking how certain design elements can be used. A few days ago, a former colleague of mine asked about creating a horizontal cascading menu for her application that mimics a lot of web applications (like the example below).

In her case, however, this was only for the Notes client. While there are probably several highly exotic ways to implement this, I opt for simplicity wherever possible. With that in mind, I let her know about the following technique, which fit her needs perfectly.

The solution: Cascading Actions. The action bar provides us with a very nice and simple way to present dynamic drop-down menus. The way I would implement this to replicate the web functionality is to create a page that is used to house the actions. Then, this page can be inserted into the frameset just below the database header. In the figure below, the area I highlighted in green shows the position of the "HomeNavBar" page in relation to the rest of the frameset.

Click for larger version...

The "HomeNavBar" page just consists of cascaded actions, with nothing else on the page (although you could add more if you wanted to).

And here is the finished product...

Click for larger version...

Now you have a static element that is always available for switching to different views, composing documents, etc. In the case of this example, I was able to do away with the common navigation on the left-side of the screen, which was essential since the views had many columns and I wanted to prevent the users from having to scroll.

The great thing about this technique besides its simplicity is the fact that it can be styled almost anyway you would like, so if your database UI standards are updated, you just have to make a quick change to the Action Bar properties in one design element. Below is a sample I whipped up stealing some icons from Yahoo! You can download the database if you want to check it out in more detail.

Thanks for stopping by...have a great weekend!

Technorati tags: ,

Labels: , , ,

permalink | leave a comment