Lotusphere Demo: Enhancing A Template UIMy perfectionist tendencies usually keep me from posting things until I'm almost completely satisfied with them. However, since so many of you have been clamoring for the demos from Lotusphere, I'm going to start putting them here, even though they are far from perfect. First up is the remake of the Document Library template that I started working with on the plane down to Lotusphere. We showed this one really fast, so let me preface this with some quick background. Sitting in the airport, I was thinking about the idea that I bring up often regarding interfaces in Notes. Basically, I think you can really push the boundaries of what you have seen with the UI...you just have to be willing to put forth the effort. Sometimes, it's not really even that hard. By the time I got on the plane, I decided that I wanted to take a stab at modifying one of the default templates that Lotus provides us. I chose the standard Document Library.
Now don't get me wrong. I think the out of the box templates are very powerful and are a great way to get up and running with Notes. The user experience, however, leaves something to be desired. They worked great 10 years ago, but are now beginning to show their age. I specifically chose the Document Library because...ug...look at that color. Yikes! :-) In case you forgot, here's what it looks like populated with some documents.
I love the color scheme even more with the pink unread marks! :-D
Anyway, this isn't the worst Notes UI I've seen by far, but there is much improvement that can be made. I decided to model the new UI after a commercially available app, just so you could see how easily the UI can be tweaked to look like almost anything. I'm a big fan of the work the guys at 37signals do, so this updated Document Library is a homage to their Basecamp app. By the time we were in the air and laptops could be turned on, I had a rough idea of the changes to make. I fired up my machine and worked for the next couple of hours on the main layout. Since I returned from Lotusphere, I had a couple of ideas to tweak it a little more, adding in some neat functionality (although whether or not this would be practical in the real world would of course depend on user testing). After all is said and done, I ended up with something like this:
While I made a few underlying changes to the design, I tried mostly not to touch any of the existing things. Looks a bit nicer I think.
Alright...here's the database so you can open it up and play around with it. Again...I'll throw out the disclaimer that this isn't close to done, but if you had to wait until I felt comfortable with it, you'd be waiting a long time! :-)
I did come up with one cool new technique that I'd like to point out (new for me anyway). Check out the little "Abstract" box to the right of the view. I did this, of course, with an embedded editor/embedded view combo. I wanted to make sure, however, that only the abstract appeared in this box. Luckily, there is a hide-when property to hide information when it is embedded. This becomes problematic, unfortunately, when you have a rich-text field, since each paragraph of the rich text has it's own hide-when property. Another challenge I had here was that I wanted to format the abstract text in a particular way, with a fixed width and with a little gradient shading. I didn't want this to appear when the user opened the document though, but there's not an option to "show information only when embedded". After I thought about it for a little while, I remembered one of my favorite design elements...programmable tables!
To get the functionality I was looking for, I created a programmable table with 2 rows. The first row should be visible when the user opens the document for reading and editing. The second row contains the formatted abstract area and should only be visible when the document is embedded. Here's where a handy trick comes into play. In the PostOpen event of the "Document" form, I placed the following code:
Sub Postopen(Source As Notesuidocument)
Dim workspace As New NotesUIWorkspace
Dim uidoc As NotesUIDocument
Dim doc As NotesDocument
Set uidoc = workspace.CurrentDocument
If uidoc.Document.UniversalID <> Source.Document.UniversalID Then 'Doc is embedded editor
doc.~$AbstractTable = "Row2"
provided by Julian Robichaux at nsftools.com.
When a document is in an embedded editor, uidoc refers to the container document, while Source refers to the document that is embedded. If the document is opened and it is not embedded, then these two objects reference the same thing. So, I check the UNID and if they are different, I assume that the document is embedded and thus show "Row2" instead of "Row1". Pretty cool, eh?
There's probably some major deficiencies in this that I haven't encountered, but so far in playing around with it, it seems to work pretty well. In any event, the technique may have some useful applications in the future. Let me know your thoughts.
OK...I'll sign out for now. Enjoy playing around with the demo and feel free to share any comments or modifications that you've made. Note that I didn't make any changes to the form yet. That is a challenge unto itself. First I want to get some of the other things out there. The drag and drop demo is coming up tomorrow...keep an eye out for that. Cheers!