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
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 onion...it's got layers! :-)
Labels: action bar, Interface, layers, Lotus Notes, UI design
permalink | leave a comment
Show & Tell Thursday: Download Edition (My Cup Runneth Over)
Since I promised at both ILUG
and Lotus Developer2007
, I figured I better get some of my example databases out here for you to check out. I've also received a lot of e-mail with questions about various concepts over the last few months, so those might be included here as well. Finally, I'm including other databases I've made available in the past on this post as well, just so this becomes a comprehensive index of all the downloads to date. Read down through the list and see if there are any goodies you'd like to have. If you find anything that's of real use to you and you'd like to show your appreciation, you can go help Eileen and contribute to her cause
As always, feel free to shoot me a mail (chris AT interfacematters.com) if you've got questions. I can't guarantee I'll answer right away (or that I'll know the answer), but I promise I will reply.
Disclaimer 1: All of these examples are proof of concepts. While many of the techniques come from applications I've developed and am using in production, I strip all extraneous code down to the bare minimum so you can focus on the mechanics of how the technique works. If you choose to use these ideas, please remember to use error checking and applicable standards based upon your company's best practices.
Disclaimer 2: I never said I was a good programmer! :-)
Disclaimer 3: Snausages...they really don't taste that good...
|Building A Wizard Using Programmable Tabbed Tables||I like Wizards...both the kind that can do cool magic tricks like turn your wife into a horny toad (no, you pervs...a horny toad) and the "really helpful from a usability standpoint" kind. Wizards are great for walking users through a multi-step process one task at a time. They're very easy to create with a programmable tabbed table you pull up in a dialog box. This demo shows you how.|
|Notes Is Like An Onion...It's Got Layers||Here is the example database that I used for my Speedgeeking session at ILUG. We can stay up all night, swappin' manly stories about layers and in the morning...I'm makin' waffles!|
|Advanced User Interface Techniques for the Notes Client||This was a demo database that I used for my session of the same name at Lotus Developer2007. It combines many of the past demos such as drag & drop, cascading menus, ordering a squishee (i.e. embedded editors) and the Super Burrito Configurator (woo hoo)!!!|
|Cool Docs||The demo that I put together on the plane on the way to Lotusphere. Just a quick idea of how a database experience can be changed in somewhat dramatic ways with just a little tweaking of the UI. Let your imagination be your guide! :-) Keep in mind that this is not a full solution...that's something I hope to work on it the future. This sample database also shows you how to easily collapse an embedded, single category view and includes code for creating "expand" and "collapse" functionality for the view as well. A nice usability touch for your embedded elements.|
|Fun With the DOM...Playing With The Action Bar||A sample snippet that demonstrates how you can use the Document Object Model to manipulate HTML elements. Since the Domino-generated action bar is just a table, you can get a hold of it and its child elements and do things like change the links, change the text based on the value of a field, turn it into a cascading menu, etc. Read the article and then follow along with the sample db.|
|Application Activity Tracking||Don't forget this nifty little project on OpenNTF. Not only is the concept fairly useful, but what's nice about this one is the activity dashboard that summarizes all of the detail in an easy to read manner. On a related note, don't miss Kevin Pettitt's SuperNTF application, which combines this project and a host of others into a really nice framework for Lotus Notes.|
|Lotus Developer2007 CSS Examples||From "Advanced CSS Techniques for Domino Web Applications". This zip file includes the stand-alone CSS and HTML files I was using to demonstrate some of the concepts like positioning and advanced selectors. The main Domino-based examples are in the demo database from the CD.|
Now it's time to go record another segment for the Taking Notes podcast
. That Bruce
guy is a task master! :-)
See you on the flipside...
P.S. I'm using box.net
to host these files. I tried their service quite a while back and it's really improved a lot. Very slick, easy to use interface. Kudos to them!
Technorati tags: show-n-tell thursday
, Lotus Notes
Labels: DOM, embedded views, layers, Lotus Notes, Show-n-tell-thursday, wizards
permalink | leave a comment
Quick Tip: Layers In Tabbed Tables
Color me (not so) surprised...we found a little issue with layers! :-D I have to give credit to Deborah Byrd, who brought this to my attention and pointed out the exact cause. She was having a problem placing a layer within a particular row in a tabbed table. I know I had done this before so I thought perhaps it was a version issue. I asked her to send me a copy of the form and sure enough, I was able to place a layer on the exact tab she wanted it in. I erroneously replied to her that I thought it was accomplished via the hack of creating the layer outside of the table and then pasting it in the appropriate tab. I sent it back to her, thinking how cool I was for figuring it out so fast! ;-D Ah...of course I should have known better. Turns out, when Deb tried to place the layer anchor where she wanted it, it wouldn't work! The problem was trying to place the anchor inside of a table that is nested in the tabbed table! You can put the layer anchor there, alright, but the layer seems to fall outside the table and doesn't respect the positioning of the tabs. Really weird! This was an unknown layer issue to me, so thanks to Deb for finding it. I hope this post helps you if you are having a similar issue. Cheers!
Labels: layers, Lotus Notes
permalink | leave a comment
Lotusphere Demo: Drag, Drop and More
One of my cooler demos from BP101 (in my opinion), was the drag and drop processing demo. This was in no way as cool as Nathan's
, but there are some fun little tricks here which you might find useful. Again I'm making the non-polished version
available right now so you can play with it, but I'll emphasize that this really hasn't been tested too much.
For those of you who couldn't make it to the session, here's the scenario I envisioned and the functionality that is available. Basically, I came up with the idea of a corporate "library" where you can browse through the books and if you want to "check one out", you do so by utilizing a drag and drop function to put it in your "basket". When you are finished, you can click a single button, which will check all the books out to you. Once again, I wanted to show you that it's not just the Web 2.0 crowd that can do cool interfaces. For this example, I chose to replicate the drag and drop functionality
demoed by the script.aculo.us
There's a lot going on in this little demo, so I'll walk you through each feature (uggghh...why do I keep doing this to myself...lots of screenshots to make! ;-)
(1) First up is the drag and drop processing itself. To add a book to your "shopping cart", you grab the doc from the embedded view and drag it over to the icon on the right side of the screen. You can see a sweet little Flash version of this by clicking the image below.
Click for animated demo
Effective use of drag and drop is a balancing act. The physical action of moving something from one place to another is a good metaphor from the real world, but in the electronic realm this presents some difficulties, at least the very first time the user sees your app. In cognitive psychology, there's a concept known as affordance. Affordance basically deals with whether the actions that an object can perform are obvious based on the object's physical properties. As it relates to our interface design, being able to drag an object (something on the screen) is usually not
Many of us know from past experience that we can drag a document to a folder in Notes, but if you were seeing this for the first time you would not have a clue this is possible unless you started playing around. Thus, if you decide to use drag and drop document processing, make sure you provide some kind of visual clue that this is possible. On the web, you can usually manipulate the properties of an object much easier than you can in the Notes client, so for client work, you'll probably have to settle for a message that tells the user what to do.
In this example, there's some text that says "Drag a book from the list and drop it on the button below to add it to your Shopping Cart". As long as the user sees this message, they'll be good to go. Once they perform this action the first time, they won't need help anymore. Drag and drop is a simple act that users remember quite well...and it's usually one they like too! (Don't forget to do usability testing to make sure your users concur). One interesting fact about drag and drop is that it is actually a slower
process than the equivalent action of clicking a button. Usually, slowing the user down is the opposite of what we want to accomplish, but in this instance, it is a common and memorable action that many users prefer.
(2) "Check Out" is performed via the button under the items listed in your cart. Clicking this button gets all of the documents that you have placed in the cart (a private folder) and sets a field with your user name. The embedded view is then updated to reflect that the documents are now checked out.
(3) I wanted to provide the users with a little abstract about the book they are interested in. If the user double-clicks on a book in the view, a little popup appears (done via a layer, of course) with this content. Ohhh...ahhhh.... I like it! :-)
Click for animated demo
What's that you ask? Why, yes...yes there is a sample database available. Here you go
...I hope you find some useful ideas within. If you are interested, here are some of the tricks I used.
* We don't get much in the way of drag and drop controls within Notes. However, we can drag documents from one folder or view to another easily enough. I utilized this fact to accomplish everything you see in the demo. The "Shopping Cart" is an embedded outline with a single entry that references a folder called "ShoppingCart". Since there's some logic I wanted to invoke when you try to drop a document on this outline, there is code in the QueryAddToFolder event of the embedded view. This code is responsible for things like checking if you are trying to add a document that is already checked out, making sure you only try to drop a document into the Shopping Cart, etc. Because I wanted to display the books added to the cart, I used a second folder called "ViewCart". The code in the QueryAddToFolder event actually adds the document being dragged to that folder if it is not checked out. Thus, we get the effect of the document immediately appearing in the area below the Shopping Cart drag target if the action is allowed.
* I didn't want users to be able to open the "ShoppingCart" folder directly, so this folder has a single line of code (Continue = False) in its QueryOpen event.
* If the users want to remove items from their cart, there is a place under the view where they can drag the documents out. This area is just another embedded outline, this time referencing a folder called "DropRemove". Since you can drag docs from one folder to another, this provides an elegant way to "remove" an item from the user's basket. Although I didn't do it since this is a demo, you'd probably want to provide some code to periodically clean that folder out. I also set Continue = False for the QueryOpen event of this folder so the user doesn't click the outline control and accidentally open the folder.
* The popup abstract is accomplished with an embedded editor placed on a layer. All of the content on the main book form is hidden when embedded except for the abstract field itself. The layer anchor is hidden and only displayed when the user double-clicks the document. To accomplish this, I placed code in the QueryOpenDocument event of the embedded view. First, I grab the container uidocument and set a field called "txt_ShowDetails" to "1" and refresh the hide formulas. In order to prevent the document from opening, I just use Continue = False again. The hide-when property of the layer anchor references the "txt_ShowDetails" field and only displays when this value is set to "1". Depending on your situation, it may be more advantageous to use environment variables. For this demo, all of the action is taking place on a form that doesn't get saved, so I chose to use a field.
* Notice that the embedded view has rounded corners (woo hoo!). Too bad it's not really an option in the client. This is accomplished by using an image for the embedded view's border property.
* In case you didn't know (I had a few people ask at Lotusphere), you can have graphics in your view...they just need to be set as Image Resources. Here's some additional detail
... And here's some more
* Just for fun, I wanted to see how to maneuver through the view without scroll bars. Check out the action buttons which move you up and down. Also, notice the formatting of the embedded view, which I think is kind of nice. This is accomplished using categorization. If anyone can tell me how to prevent the categories from collapsing when clicked on, that would be really cool. Obviously the utility of this idea is limited, but it works nicely if you only have a handful of documents to deal with.
* For your testing purposes, I added an action in the embedded view to "return" a book. If you've ever had a problem targeting a document that is highlighted in a view, you might want to check out the code in this action button. The trick is to use CaretNoteID of NotesUIView.
Well...I think that about wraps it up. Have fun playing around and, as always, if you find any good uses for these techniques, I'd love to hear about it.
Labels: layers, Lotusphere2007, UI design
permalink | leave a comment
More Layer Goodies...
...but not from me this time. I'm working on a new article (promise!), but it's turning out to be a long one. I'll post it soon.
Anyway, check out Playing With Layers
on Jane Griscti's Notes on Lotus Notes blog
. She continues where I left off, building a cool layer effect to display document history and comments. There's some nice code there for showing/hiding the layers and she provides some great tips about positioning them (which can drive you crazy until you figure it out).
Take some time to dig through the rest of Jane's blog too...definitely some good stuff there. Ah...so many excellent blogs, so little time.
permalink | leave a comment