Wednesday, November 18, 2009

Sweet Drag and Drop Actions In the Lotus Notes Client

I've mentioned once or twice before that I really like using drag and drop. Although it is often a bit slower than other actions and you sometimes have to show the user how to do it, I find it to be a preferred method for executing certain tasks in an application. Lotus Notes itself offers many cool and useful drag and drop actions. I've been showing end users some of these for a long time, and always there are folks that had no clue drag and drop actions were even available. I wanted to share a few of them with you now.

Drag & Drop Links

You can drag and drop a document from any Notes view or a database icon into a rich-text field and Notes will create a document link or database link (as applicable). If the document is open, you can actually perform the drag and drop action from the tab. This is a much easier way to teach users how to send links to documents.


A couple of hints: You can often drag information from one part of Notes into another by hovering over the appropriate tab. For example, click and hold the tab of an open document, then drag it over to the tab of a document in edit mode. Hold it there for a second and the focus will change to the new document. You can then perform the drop action into a rich-text field and the link will be created. Also, an easy way to get the Notes:// address of an element is to perform that drag and drop into a regular text field. This will give you the Notes:// link along with the title of the item.


Drag & Drop Attachments

You can take attachments from a Notes document and drag them to the file system or your Windows desktop. For those of you on Notes 8, check out the very cool File Navigator side shelf component on OpenNTF. You can use this to drag and drop files directly from your Notes client!



Drag & Drop To/From Sametime

With Notes 8.5, you can drag a mail message to the Sametime Contacts list. When you drop it, a dialog will appear and present you with a list of all recipients of that e-mail message. You can choose to add them all or just select individuals to your contacts. This is a very speedy way to create groups within Sametime.


Going the reverse direction, you can drag a single contact or a group name from your Sametime Contacts list into the address fields of a new memo to instantly add those recipients to the mail message.


If you drag and drop a contact into a rich-text field, a mailto link to that individual will be created.



Drag & Drop Text

With Notes 8.5, users can now have a more rich experience as they drag & drop text. You can drag and drop text within a rich-text field (useful for rearranging some paragraphs, for example) or even between rich-text fields. I'll often use this when I am creating a new calendar entry and I want to pull some information out of an existing doc. Sure copy and paste is a bit faster, but drag and drop is so fun! ;-)


Drag & Drop Tabs

I often work with several documents and views open at one time and I generally like to have an orderly flow to how the tabs are arranged. If I open up these elements in an order other than the way I like them arranged, I just grab the tabs and reorder them via drag & drop. Perfect.


Drag & Drop Table Controls

There are some long awaited functions now available for manipulating tables via drag & drop. One of the best is the ability to resize columns without using the ruler. With Notes 8.5.1, you just grab the column border and drag & drop to resize.


You can also move whole rows or columns at one time via drag & drop. If you hover over the outside border of a row or column, you'll see the cursor change to an arrow pointing at a row or column respectively. Click, hold and drag and you'll see a shadow moving to represent that row/column. Drop it where you want it in the table and the other elements will be reordered accordingly (see animation below).



If you just want to move the content of a single cell, highlight it and then drag & drop it into the destination cell of choice. You can move multiple cells at once, as well. Play around with this a bit and you'll find some interesting functions.

While I'm on the subject of tables, while not strictly drag & drop specific, there are a couple of other very handy new tricks you might like. If you want to add a new row or column, you can now do this without resorting to the Table menu. To do this, hold the Shift key down and then hover over a row/column border. You'll see the cursor change to a thick horizontal or vertical line with a little blue diamond next to it. When you see this cursor, double click with your mouse and the new row/column will be inserted. Thanks to the developers...I really like that new edition!



So, those are some of my favorite drag & drop features in the Notes client. There are many more. How about you? Any particular drag & drop actions I missed that you really like? If so, please share in the comments.

Labels: , , ,

permalink | leave a comment

Friday, January 30, 2009

Speedgeeking: The Amazing Tabbed Table

I had the pleasure of being able to participate in Speedgeeking this year at Lotusphere and while it's hard on the voice, it's really a lot of fun. For those not familiar with speedgeeking, it's much like speed dating. Each presenter is at a separate table and groups of attendees spend 5 minutes getting a "crash course" in whatever that presenter's topic is. After 5 minutes, they go to the next station and so on for 1 hour. To keep it fun and lively, an MC is continually calling out the time and rowdily making people move along. It's a bit of a challenge to distill a topic down into a meaningful 5 minute pitch and presenting the same content (loudly) 12 times straight is certainly harder than it seems, but the effort is totally worth it.

As I promised to the attendees of that speedgeeking session, I'm including my sample database here to play around with. If you didn't get to attend, then read on to learn more about "The Ever Amazing Tabbed Table: Cool UI Tricks Anyone Can Do" (and by anyone, I mean developers...admins couldn't handle this ;-)

Get the database here


I think tabbed tables are an excellent design element for making good UIs in Lotus Notes. I'm continually amazed at the uses that you can come up with for this versatile element. For speedgeeking, I demonstrated four popular design pattern uses for the tabbed table, primarily focused on their programmatic aspect.

So what will you find in the sample database? Four cool techniques including:

Fade In/Fade Out

Fade In/Out Example

Wizards
Wizards Example


Rotating Headlines

Headlines Example

Elegant Navigation

Navigation Example


All of these techniques are extremely easy, can be setup in a few minutes and can be used over and over again. To me, simple is elegant. I hope you enjoy and find some new uses in your own applications.

Labels: , , ,

permalink | leave a comment

Monday, December 22, 2008

Holy Cow, This Is Cool!

A blog post entitled "Holy Cow, This Is Cool Or In Which I Introduce A New UI Technique But Give It A Vague And Flavorful Title to Game People Into Coming Here From Planet Lotus Since No One Really Reads This Interface Stuff"

Hi All...I always seem to come up with these posts at times that no one is around, but what the heck. Lotusphere is almost here and I'm lucky enough to be presenting once again (more on that later). As I was driving to a customer's site the other day, I thought of this technique and after playing around for a few minutes, I found that it works great. If you like it, consider it an early Christmas (Festivus, Hanukkah, insert holiday of choice here) gift.

I really love many of the UI patterns that have become popular in "Web 2.0" applications. Among these, one of the techniques that you see quite often is that of the "Fade In/Fade Out" element. Let's say you want to display a status or error message to a user after they enter an incorrect value. Sure you can just use a hide-when and make the text appear or pop up a message in a dialog box. But that just isn't sexy. You can add a little spice to your app by applying this modern looking UI device. First, let's see it in action, then I'll explain what's going on.



Now...that's the Lotus Notes client you are looking at, not a browser. While it's a very basic effect, it enhances the user experience in a nice and subtle way. It helps draw attention to the fact that there is a new element on the page and does so in a way that is less jarring than a pop-up box or instantly having the message appear on the screen. The beauty of this technique is that it is very simple to implement in your application. Here's how.

The key to this technique is the versatile programmable tabbed table (I continue to find new uses for this design element....I love it!). What I did is create a tabbed table and set the text and background colors to get progressively darker for a fade in effect. Then, using script, I simply switched from one row to the next on a timed interval using Sleep to pause the necessary amount of time.

For purposes of this example, I hard-coded everything, but after going through the steps, you should see how easy it would be to modify this so it is dynamic. The picture below shows the six rows that I used for the table. I selected a base color for the final display box background and then used lighter shades of that color for the previous rows. I did the same thing for the text in each row. I haven't really thought of any hard and fast rules here...just play with it until it looks good to you.

Formatting before setting it as a programmable tabbed table
Hint: I find it easier to do the formatting for a tabbed table as just a standard table at first, then switch it via the Table Rows property tab.

As you may recall, you can programmatically switch rows in a tabbed table by writing a single formula line such as FIELD $DisplayTable1:= "4", where DisplayTable1 is the name of the table as defined in the Table HTML Tags properties and 4 is the name of the row.

Setting the table and row names via the properties box

You can also change the row via script, which is what I did in this case. I resorted to using LotusScript since it provided me with a facility to directly control how much time I wanted between each row change. If you are going to use LotusScript to do the row switching, make sure you add a field to your form that is the same name as that of the table (e.g. $DisplayTable1), otherwise you'll get an error when you try to set this field in your code.

Once you have the programmable tabbed table setup and formatted as you like, you just need to write the script to display the table rows to simulate the fade in effect. If I was doing this in a production app, I would probably hide the table until I needed it, fade in to the message and then fade out when the user dismisses it. Thus, the code would look something like this:
Dim workspace As New NotesUIWorkspace
Dim uidoc As NotesUIDocument

Set
uidoc = workspace.CurrentDocument

Call uidoc.FieldSetText("ShowMessage", "1")
Call
uidoc.Refresh
Call
uidoc.FieldSetText("$MessageTable1", "1")
Call
uidoc.Refresh
Sleep
.15
Call
uidoc.FieldSetText("$MessageTable1", "2")
Call
uidoc.Refresh
Sleep
.15
Call uidoc.FieldSetText("$MessageTable1", "3")
Call
uidoc.Refresh
Sleep
.15
Call uidoc.FieldSetText("$MessageTable1", "4")
Call
uidoc.Refresh
Sleep
.15
Call
uidoc.FieldSetText("$MessageTable1", "5")
Call
uidoc.Refresh
Sleep
.15
Call
uidoc.FieldSetText("$MessageTable1", "6")
Call uidoc.Refresh
This LotusScript was converted to HTML using the ls2html routine,
provided by Julian Robichaux at nsftools.com.

Notice here that the first thing I am doing is setting a field called ShowMessage to "1", which is just a field I use to control the hide-when properties on the table. Then, I set the table to row 1, refresh the document and sleep for .15 seconds, switch to the next row, sleep again and so on until the final row is revealed. To fade out, just repeat the steps above in reverse. That's all there is to it. I told you it was easy.

In case any of that was unclear, I've created a sample database that you can download to deconstruct the technique. It is simple and elegant, which you know by now is my favorite kind. I hope you can find a use for this in your applications.

Now...I mentioned before about Lotusphere. Did you like that technique? Do you want to learn even more "Web 2.0" UI goodies? Well, it just so happens that I'll be teaming up once again with my friend Nathan Freeman to present AD212 - 10 Web 2.0 User Interface Patterns for IBM Lotus Notes and XPages. In this session, we'll be taking a look at 10 popular modern UI patterns and showing you how to bring them to the client and to XPages. I'm excited about how it's coming out and I hope you'll drop by to check it out.

In addition to my session with Nathan, I'm very pleased to report that I'm teaming up for the first time with Tom Duff, aka Mr. "Now I'm published in a popular CIO.com article" (go read it...it's awesome!). We're going to be presenting BP108 - Getting To WOW...Interface First Design for IBM Lotus Notes Developers (it's also being repeated in case you can't make the first session). This is an updated version of some of my past presentations and I'm excited about it because Tom will bring his unique insight into the process of moving from a code-focused orientation to a more holistic one. Please come by if you can (and we'll have some goodies to give away as well! :-)

That's all for now. Signing off so I can work on more Lotusphere stuff. I hope you all have a fantastic holiday and very happy New Year!

Labels: , , ,

permalink | leave a comment