Tuesday, January 30, 2007

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 javascript library. Not only did I want to copy the functionality, but also wanted to show that the look and feel in the Notes client could be very similar. Here's what I ended up with:

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 obvious.

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


By Anonymous Neil, at 5:34 AM  

This is a cool interface idea I have been using for a while. In my SmartDrop tool on open ntf, you can drag emails over a "drop zone" panel, which like your code is an outline that relates to a folder with query drag/drop code.

Users love it an its so simple to achieve... I am surprise more people dont do it

By Blogger Chris Blatnick, at 10:33 AM  

@Neil...Ah, I just looked at the SmartDrop user guide...very cool! It is a great technique and your app is a perfect example of the idea really in action. Nice work!

By Blogger Jim R, at 6:02 AM  

I really enjoyed your's & Nathan's Lotusphere presentation. The Drag & Drop was very nice. Can't wait to dig into your example a little more. Keep up the good work in keeping us poor ui developers in line!!!

By Blogger Chris Blatnick, at 12:47 PM  

@Jim...Thanks! Glad you could make it to the session!!! :-) Let me know what you think of the drag&drop ideas. I think there is some real potential there. Cheers!

By Anonymous Martin, at 10:39 PM  

Hi Chris...I really like this interface. This and other postings from you are making me think again about what we can do with the Notes client.

Not sure if I'm missing something with your demo database. I can't seem to add anything to the cart. Any ideas?

By Blogger Chris Blatnick, at 3:38 PM  

Hi Martin...thanks...glad you like it! I am using personal on first use folders for the demo, so that would be the first place to check. I'm guessing that for some reason the appropriate folder didn't get created. In a production app, I would probably have code that runs right when the db opens to make sure the necessary folders are in place. Please take a look at that and let me know what you find.

By Anonymous Martin, at 9:37 AM  

Hi Chris...Sorry for the delay in reporting back. Well I checked the personal on first use folder "ViewCart" which had been created OK. I realised my laptop was running 6.5.0 and wondered if it was a client version issue related to this regression :

So I patched to 6.5.5 and then got some very strange behaviour. Whenever the Library form was opened in either the client or Designer I got "An error occurred while formatting, press ESC to close window". I couldn't find much info on this message, so reverted back to 6.5 then patched to 6.5.1. The Library form was now displaying OK, but I still had the problem of the items not showing up in the ViewCart folder when dragged onto ShoppingCart button.

I gave it a go on my desktop running 7.0.2 with the same issue. So I then gave it a go at work (during my lunch break of course :-) where I've got 6.5.2, but again still the results.

I'm now thinking perhaps it's not a version issue after all, so I created my own version of your ViewCart folder - same design, personal on first use and replaced all occurrences in the design with a reference to the new folder.

And now it works perfectly! I'm not sure what was causing this - especially as no-one else reported any issues. Also the experience under 6.5.5 was a bit disconcerting where the form just won't load correctly. I might try that one again if I get chance.

Out of interest what version did you use to build this?

By Anonymous Martin, at 9:38 AM  

Sorry - that url should have been


By Blogger Chris Blatnick, at 10:35 PM  

@Martin...I used 6.5.2 to build the demo. That is wierd that you had all that trouble. I'll have to see if I can try it out on some different versions as well. Thanks for reporting back.

Post a Comment

Links to this post:

Create a Link

<< Home