Lotusphere Demo: Drag, Drop and MoreOne 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.
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.
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! :-)
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.