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


Christopher Byrne said...

I had thought about this approach in the past but shied away from it because of the bugginess associated with frames in the Notes Client. If you are able to get around this problem, then it is a great approach!

Chris Blatnick said...

Frames are buggy in Notes???!!! I've never heard such a thing! ;-)

Yes...totally true. Of course, I think frames are totally evil on the web, but in Notes they CAN be useful. Unfortunately, the bugginess you speak of sometimes leads to hackery, but I've pretty much come to the conclusion that hackery and Notes go hand in hand...and I think many of us love it that way. :-)

Wayne said...

Do you know if it is possible to change the look of the dropdown menus?

Under win 2000 it looks a very drab grey


Esther said...

In the Linde graphic above, how did you get the background of the actual dropdown menu to change? As someone previously said, for Windows machines, it keeps the system color, and I've never found a way to style sub-actions.

Chris Blatnick said...

@Wayne and Esther: Unfortunately, I don't think you can change the drop down color. See my latest post for details. Cheers...Chris

Don McNally said...

Hey, Chris. It was good to meet you last week, and thanks again for the session you and Nathan did.

I tried using this method in one of my databases but it isn't working right. I set the action button to do a @Command(OpenView) but each view opens in its own window. I tried setting the target for the top frame to the bottom frame and I tried setting the target on each action to the bottom frame but neither worked.

Any other ideas?


Chris Blatnick said...

@Don...thanks for coming to our session! As far as your question, I got this to work using @SetTargetFrame and then @PostedCommand([OpenView]). I guess it depends on how you've laid things out, but this works perfectly for me. If you haven't tried this, give it a go and let me know if it worked.

Don McNally said...

@Chris: That worked. That's one good thing about the variety of ways to do things in Notes. It would be much better if the action button would use the Target Frame property on the button or on the frame containing the page containing the action bar, but that would be too easy. ;)

One more question (I asked Nathan as well): Does a layer have to be displayed completely in the frame containing its anchor? I wanted to use the design of this example with the idea of your second cascade example of putting an outline in a layer but my layer is hidden by the lower frame. I suspect that is "just the way it is" but let me know if you ever saw a layer anchored in one frame overlay another frame (I was going for the "drop down" version of the slide out action that the bookmark bar does).


Chris Blatnick said...

@Don...Unfortunately, layers are constrained by the frame that they are in. It would be very cool to be able to do what you suggest, but I don't think it is possible at this time.