Tuesday, August 21, 2007

Use Editable Columns To Trigger Actions

Did you ever want to include a little icon or picture directly next to a document in a view that you could click on to initiate an action? You see this on the web all the time, especially in the "Web 2.0" world. This tip will show you how to accomplish this within the Lotus Notes client. I think it's a pretty cool little trick and I hope you will as well.

Here's the scenario. Remember the Super Burrito Configurator? Well, one part of this (over the top) demo is the ability to construct your meal by dragging the ingredients to the burrito image. This generates a list, which is just a folder that you are adding new documents to. Since I'm using an embedded folder, I didn't want to pollute it with action bars, selection margins or other view riffraff. What we are looking for here is a nice, clean and obvious solution. Notes views don't provide many affordances. Unless you are trained in the software, you don't know that you can select a document, go up to the Actions menu and select Folder - Remove From Folder. Even if you know how to do it, who wants to??!!! It's too cumbersome. So, what I ended up with is something that looks like this:

Notice the icon with the word 'Delete' directly next to each burrito filing? Clicking on the icon does exactly what you would expect...deletes the ingredient from your burrito. In Notes terminology, it just removes the document from the folder. Pretty cool, eh?

The secret here is to take advantage of the view's InViewEdit event. When you click on an editable column, the code in this event will run. Since I'm just removing the doc from the folder, it's very simple LotusScript: I don't have to mess with the various cases that you typically encounter with InViewEdit and I don't have to worry about doing any kind of validation. All that matters is that when the user clicks the column, the code runs. Here it is:

Sub Inviewedit(Source As Notesuiview, Requesttype As Integer, Colprogname As Variant, Columnvalue As Variant, Continue As Variant)

Dim doc As NotesDocument
Dim caret As String

REM Get the CaretNoteID - exit if it does not point at a document
caret = Source.CaretNoteID
If caret = "0" Then Exit Sub

REM Get the current database and document
Set db = Source.View.Parent
Set doc = db.GetDocumentByID(caret)

REM OK...we can ditch it
Call doc.RemoveFromFolder(Source.View.Name)

End Sub

This LotusScript was converted to HTML using the ls2html routine,
provided by Julian Robichaux at nsftools.com.

To configure this for your own use, just follow these steps:

1. Add the above code to the InViewEdit of your folder

2. Select the column you want to use for the action and set it's properties for "Display values as icons" and "Editable column"to true

3. Set the value of the column to the icon you want to use (either the number or the name of an image resource)

4. Bask in the glory as your users tell you how awesome you are! :-)

That's all there is to it. This is another seemingly trivial but very high value technique. It allows you to simplify the UI greatly and follows the rule "don't make me think!" to the letter. Of course, you're not limited to just removing the document from a folder. Basically you can code anything you'd like in the InViewEdit. How about marking the document as a favorite? Adding the author to your address book? There are probably a lot of cool uses for this idea. Now it's up to you to try it and figure out where it might work for you. If you use this technique in an innovative way, please let me know so I can share with everyone.



Joanne said...

You were right - very cool! And worth the wait! :-)

Dmytro said...

super super cool :-)

Hérix said...

Yeah, I did it too. Thanxxx for that tip. It's so fine, but ...
I used this idea this way : in a view, a column displays some icon. One click on the icon toggles some field in the document. This field is used as a status (on/off) /and/ contains the name of the image resource used for said icon (so it toggles raised / sunken )
So far so good.
Now I going mad : clicking the icon does the job //and// triggers some seemingly random scroll and the poor user has to fumble his way back to where he was. I tried various settings for the view design, to no avail.
Any idea anybody ?

Chris Blatnick said...

@Hérix...I haven't experienced this issue? Is the view an embedded view or just being used in the standard way?