SnTT: Cascading Navigation in NotesHi 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.
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...
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: show-n-tell thursday, Lotus Notes