Monday, May 11, 2009

Implementing A Tag Cloud In The Lotus Notes Client

Welcome back. It's been awhile. I'd ask you why you haven't visited or called lately, but I's me. I haven't been giving much to this relationship lately. I'll try harder...I promise. How about starting with a new post about creating a tag cloud in a Lotus Notes client application? That sounds good? Great...thanks for giving me a second chance! :-)

Way back at Lotusphere 2009, Nathan and I delivered a presentation on Web 2.0 design patterns for Lotus Notes. He focused on the web side of things (with XPages) and I worked on the client UI side. Unfortunately, some technical difficulties got in our way and the session wasn't nearly as good as it could have been. However, the content is still worth digging into, so I thought I'd start out with one that is useful for injecting the idea of topic popularity into your application: The Tag Cloud.

I'd guess that most people have at least seen a tag cloud by now, given that it is a pretty common Web 2.0 pattern. A tag cloud is used as a navigation mechanism to allow users to browse information and see at a glance what content is most popular or prevalent in an application. A tag cloud is simply a list of tags (be they user added or generated from categories) where the physical size of the tag represents the weight (frequency) of that information within the application. An important aspect of the tag cloud is that you can click on a tag and this action will filter the data list to show only the content with that tag. Here's an example from one of the Lotus products, Lotus Connections:

Tag clouds can be very useful in situations when a user wants to discover information rather than search for it. I've gone on and on before about the fact that most business applications are such that a user has a targeted objective when they use the app, so the UI should be designed to facilitate getting them to the info they need as quickly as possible. There are certain classes of applications, however, where browsing of information is more meaningful. A discussion database is a great example of this, as are apps such as product reviews, policies and procedures and so on. When discoverability will add value to your application, then a tag cloud might be a good choice for a UI component.

Before we jump into the implementation, let me put forth a few caveats. First, when I was initially coming up with this, I went through about four different methods of creating a tag cloud. These methods ranged from quite simple (like I'll be showing you here) to insane hackery. While it's pretty easy to build a tag cloud on the web and there are tons of code samples to do so, it was a bit of a challenge to implement one in the Notes client. Each of the different techniques I tried had strengths and weaknesses. I decided to go with the method shown below because it was the most straightforward and will work in R6 and above, so it's not limited to the latest and greatest version of Notes. It's not elegant, but it works. I'm a fan of clean, elegant design, but sometimes it's necessary to create something less than beautiful behind the scenes to make the end user experience better. As long as you are not creating a maintenance nightmare, I think it is OK that we work harder so our users don't have to.

The way I approached this technique was to make use of the category field in an existing Notes database. Exposing existing categories as a tag cloud is a very easy way to get started and introduce this functionality to your users. Personally, I find that tag clouds work best when the number of entries is not overwhelming. They do take up a lot of valuable screen real estate, so you'll need to make the call as to whether they add enough value to justify use or not. Of course, the ideas presented here can be applied to any data captured in a discrete field on your documents.

Aside: I would be remiss if I didn't point out that there is a Tag Cloud component available on OpenNTF that you can use in a Composite Application. With this component, you can add tag cloud functionality to your application within minutes. There's a good tutorial on doing so here.

The first step in building the tag cloud component for the Notes client is to create the view that will be used to get the tags (categories). Here's a screenshot showing the view in my demo database.

The first column includes the count of all the tags in that grouping, which I find useful to display along with the tag cloud in some cases. We'll use this view to lookup the tags and display them in the tag cloud.

The next thing we need is to create the form that will serve as a container for the tag cloud. I decided to use a form as it gives the flexibility of having the tag cloud generated on the fly or via a process such as a scheduled agent. I'm also trying to make these techniques easy for newer developers, so the form and field idea works pretty well. Because we need the tags to be clickable, we need some sort of hotspot on each one. This could be likely by accomplished by using Lotusscript or a third-party product like Midas to build the tags in a rich text field and then put links around them but this seemed a little complex for my tastes. Thus, I decided to implement the tag cloud as a series of fields. Each field holds a single tag and then I created an action hotspot around each field. Let's break it down bit by bit:

Click to enlarge

First, the top of the form houses some computed fields that are used to lookup the tags and the quantity each of the tags. These values come directly from the tag cloud view.

Next are the various tag fields themselves. Now...before you start going off...I know that this is cumbersome to build the first time. However, I decided to strike a balance between functionality, ease to maintain and ease for the developer to understand, so it is what it is! :-) If you decide to use this technique, it would be a good idea to try to gauge how many tags you have before you build it. My personal preference is to limit a tag cloud to no more than 40 or 50 tags (I like less). Beyond that number is just too much visual noise for my taste. However, this could expand to as many fields as you want to create.

The field values themselves are populated in the PostOpen event. This event holds the meat of the code, as it implements the tag cloud algorithm to allow us to determine how large (from a font size perspective) each tag should be. There are variety of these algorithms available on the web, and I won't belabor them here. For our purposes, just know that I selected a common one and implemented it in formula language. The code loops through each value of the num_CategoryTotals field, determines how many entries there are for that tag and then uses that number in the algorithm to set the font size, plugging the value of the current tag into the txt_Tag# field that corresponds to the counter in the loop.
If you'd like to use a different tag cloud algorithm, just substitute your code as necessary.

The final part of the equation is to add a hotspot around each tag field. This hotspot will filter the view that you are displaying to the end user so that it only shows the given tag (category). In order to do this, we make use of the @SetViewInfo command. If you are not familiar with this command, it was added in R6 and allows you to display only documents from a given category in a categorized view. Armed with this tool, we open the view in question, make sure all the categories are expanded (or else you can end up with what appears to be a blank view) and then perform @SetViewInfo, using the given tag as the filter string.

One other note: You may want your tag cloud to have different colors. Not only does this provide visual interest, but it also can provide another clue as to the relative weight of a given tag (i.e. tags with the same color have close to the same number of entries). You add color in one of two ways. You can set the color values using formula language in the PostOpen event, or you can just apply color to the individual tag fields. The advantage of the first option is that it does respect the concept of relative weight of tags, but the disadvantage is that you are limited to the 15 colors allowed in @Command([TextSetFontColor]). With the second option, you can use any color you want, allowing you to make the tag cloud fit better with the design of your application. What you lose here, however, is the idea of relative weight since you are randomly choosing the colors. As always, it's a judgment call. Use whatever concept works best for you.

Once you put all of this together, all that is needed is to drop your tag cloud form into a place that makes sense. In most cases, a tag cloud will be most compelling when included alongside a view, so if you are building a frameset with navigation elements in one frame and a Notes view in another, the tag cloud should be included in one of the navigation frames.

When complete, the generic, non-styled version looks something like this:

But a little more work integrating it into the design of your application can give you something like this:

Now that is all said and done and I know what you are thinking: "Give me the code and sample database already!". OK, OK. Here we go:

I've included two downloads below. One is the complete design pattern database that was used at Lotusphere. This has all of the code and you can see how it was customized for the specific database in question. (This is a database that is about 10 years old...created in R4.6 or R5, I think, and I reskinned it for use as a demo). The other download is the very generic implementation of the tag cloud with just the tag cloud components in it. The idea is you should be able to grab these design elements, throw them into your database and be up and running with a tag cloud in a few minutes. I've included the instructions to add the tag cloud to your application in the Using This Database document. Download the database and dig in to give it a try.

I know there are a lot of improvements that can be made here, but my hope is that this gets the ideas going. I haven't seen an implementation of a tag cloud in the Notes client from the blogsphere yet, but I can't wait to see what you all come up with based on this skeleton. Please let me know and if you'd like, I can share your results here.

*Download the complete Lotusphere Demo

*Download the tag cloud design elements database

Labels: , , ,

permalink | leave a comment

Thursday, October 23, 2008

SnTT: Quick Follow-up To "Universal Toolbar"

It seems some folks liked my idea from last week, especially the example screenshot showing a drop down menu in this "universal toolbar" area.

I received a comment and a few e-mails asking how this was done. Well...I actually wrote this up (along with a sample database) a couple of years ago, so today's show and tell will be a cheat, as I am just going to link you over to that entry. With that, here you go. Enjoy.

SnTT: Cascading Navigation In Notes

Editor's Note: The sample database that is available for download also includes all my experiments using layers to create cascading menus. Remember...Lotus Notes is like an's got layers! :-)

Labels: , , , ,

permalink | leave a comment

Thursday, October 16, 2008

SnTT: Add A "Universal Toolbar" To Your Lotus Notes Applications

Hey, look at that: A Show-n-Tell Thursday post. Woohoo! OK...I've got to think up a better/more descriptive name than "universal toolbar", but I'm creatively challenged today. At least I got a post out...geez. :-)

If you think about most of your applications, there are probably certain functions that are executed more than anything else. Perhaps it is a particular search mechanism, running a certain agent or navigating to a given document. Whatever the most common action is, do you make it easy for your users to get to? By easy, I mean is it always available or at least one step away? If not, you might want to consider using the universal toolbar technique. It's a simple and elegant solution for many UIs.

Here is one example. In this application, the most frequent activity is to open a particular document. There are several different parts and areas to this application, but often the user needs to quickly get to one of the core documents by the key value (in this case a part number). In a typical Notes application UI, a user would have to navigate to the view that contained the document in question, then use the "Starts with..." quick find function to jump to the document and then double-click on the document to open it. This is at least 3 steps and for a very frequently used activity, I think this is too much. Instead, my universal toolbar includes the ability for the user to enter the Part Number and open the document directly, no matter where in the application they are.

As you can see from the screenshots, it doesn't matter where the user is in the application, they always have the ability to enter the Part Number and the application will open the document. This saves the users tons of time and they love it!

To do this, I add a small frame into the application frameset. This can be positioned anywhere really, but I find it works well near the top or under the header. This frame becomes the container for your universal toolbar, which is usually a form containing the functionality you want to make available.

If you look carefully, you'll also notice I use a border caption on the universal toolbar frame so that it can be hidden if desired, freeing up that screen real estate.

Here's another example of using the universal toolbar concept in an application. In this case, I gave the users drop-down navigation. Space was at a premium in this application, so we wanted to remove any links to the left or right side of the screen.

One other way I've used this is to allow the user to quickly add new documents without opening a form.

So that's it...pretty simple but very effective. Everytime I've added this functionality to an existing application, I've received rave reviews from users and thanks for saving them time. Give it a try in your apps and let me know how it works.

Labels: , , , ,

permalink | leave a comment

Monday, August 04, 2008

Is Lotus Notes Long In The Tooth?

By now, if you are a member of the Lotus community in any way, shape or form, you've probably seen the great new press release that articulates the momentum we've been gaining (quarter after quarter) over our competitors.  It's so great to see the commitment we've all made to this platform be validated in real world terms.  I, for one, welcome our new Lotus Notes overlords.  ;-)

In light of all the great press and positive upswing I've seen out in the wild lately, I thought it was interesting that I had the following conversation the other day.  I was at a meeting with a customer...a large financial institution.  They are a long-time Lotus customer and really do a great job taking advantage of the Notes platform.  After a successful meeting, I was standing out in the hall talking with one of the VPs and he said to me, "We use Lotus Notes for so many things, especially workflow applications, but they are getting pretty long in the tooth."  I was not expecting that comment, but I immediately knew what he was referring to.  The thousands of applications this customer has are still providing a lot of business value, but the problem is...many of them look and feel old.  In other words, the interface is what makes him think that perhaps it's time to do something new.  I've been around long enough to know that this is not a new sentiment, but it's one worth shedding a little light on.

One of Lotus Notes' greatest strengths can also be its bane.  With Notes, you can rapidly roll out a solution that addresses a business problem, usually faster than your colleagues that use some other technology.  I've seen many of these applications continue providing great value to a company many years after they were initially deployed.  The 100% backward compatibility allows these databases to keep on working version after version.  This brings us to the problem of the interface, however.  If an application was created in...let's say R4...that application is already over a decade old.  If changes to the UI haven't been made, then of course it is going to look antiquated.  Both the technology and interface conventions have changed a lot in that time and user expectations have greatly morphed in that period as well. 

Here's the real truth:  As developers, we no longer have the luxury of creating application that work but don't look good.  You can't say "I don't do UI" any more, lest you want the Notes platform to disappear.  The users of today are computer literate or at least savvy enough to know a good application experience from a bad one.  The internet and Web 2.0 has established a precedent when it comes to usability and user interface design and we ignore this precedent at our own peril. Lotus Notes long in the tooth?  Is it a tired platform that we need to send to the old folks home?  Of course not.  The fact is, the future for Lotus Notes is brighter than it's been for a long time.  It is necessary, however, to start treating it like the modern development platform it is and that means that developers need to take a look at themselves and see if they have the requisite skills to create compelling UIs and usable applications on the Notes platform.  If you feel you are deficient in this area, then here's my call to action:

-  Start thinking about the user interface at the very beginning of your project.  You don't necessarily have to use low-fidelity prototyping, but the interface shouldn't be an afterthought.

- Read a good book or two on interface design.  I'd recommend starting with Don't Make Me Think or Designing Interfaces: Patterns for Effective Interaction DesignGetting Real by the guys at 37Signals is a must read.

- Make usability testing a part of your standard development methodology.  Then actually listen to what your users have to say and make the appropriate changes.

- Sharpen your technical design skills.  Learn how to use a graphics program such as Photoshop or Paint Shop Pro.  Really learn CSS and JavaScript so that your web apps can look and function like they are modern day creations.

- Stop making all your Notes apps look the same as you did 10 years ago.  Yes...I'm talking to you!  :-)  At a minimum, begin utilizing the User Experience Guidelines for IBM Rich Client Applications.  Better than that, though, is to make clean and simple interfaces that support what your users are doing in your more, no less.

I know many developers think the interface is touchy feely stuff, but the reality is that our software is judged by its looks.  Lotus Notes now has a pretty face.  Do your applications?  If your users think that Lotus Notes is "long in the tooth", then your choice is clear...start fixing those interfaces or put them out to pasture. 

Labels: , , ,

permalink | leave a comment

Thursday, December 27, 2007

SnTT: Using @Abstract To Enhance A View

Have you ever wanted to spice up a view a little by adding abstract information to it? That is, to include some of the text of the document in the view itself so the user doesn't have to open it to determine if it is worth reading? This is pretty simple to do using the @Abstract formula.

@Abstract allows you to abbreviate the content of a field in a Notes document. What I find cool is that it can also work on Rich Text fields. Now, @Abstract is very powerful and can allow you to do some interesting transformations with information in a field, but for the purposes of exposing some abstract information in a view, we'll just use the simple stuff.

In order to maintain good performance in your application, you shouldn't use @Abstract in the view itself. Instead, create a new field on the form in question in order to capture the abstract information. You can then refer to this field in the view column. Let's say you want to add this functionality to a document library. Open the 'Document' form and add a new field called "BodyAbstract". This should be a computed text field. The formula for this field would be something like:

@Abstract( [TextOnly]:[TrimWhite]; 1000 ; "" ; "Body" ).

As used here, this will capture the text of the "Body" rt field, trimming out whitespace and grabbing the first 1000 characters (Check out the help file to see how you can enhance @Abstract with additional keyword parameters).

In the view, in order to allow the user to decide whether or not the abstract should be visible for a particular document, I made the "Subject" column categorized, then included the abstract in a regular column. Here's what it looks like in design mode:

And here it is in action:

Click to enlarge

@Abstract is useful for many purposes, and this simple technique exposes just one of those. I think this idea makes sense for a lot of document-based repositories and as a bonus is really easy to implement.

Labels: , , , ,

permalink | leave a comment

Thursday, June 01, 2006

SnTT: Cascading Navigation in Notes

Hi again. I'm often asked by fellow developers how a particular UI technique can be applied in Notes. I really enjoy the challenge of rethinking how certain design elements can be used. A few days ago, a former colleague of mine asked about creating a horizontal cascading menu for her application that mimics a lot of web applications (like the example below).

In her case, however, this was only for the Notes client. While there are probably several highly exotic ways to implement this, I opt for simplicity wherever possible. With that in mind, I let her know about the following technique, which fit her needs perfectly.

The solution: Cascading Actions. The action bar provides us with a very nice and simple way to present dynamic drop-down menus. The way I would implement this to replicate the web functionality is to create a page that is used to house the actions. Then, this page can be inserted into the frameset just below the database header. In the figure below, the area I highlighted in green shows the position of the "HomeNavBar" page in relation to the rest of the frameset.

Click for larger version...

The "HomeNavBar" page just consists of cascaded actions, with nothing else on the page (although you could add more if you wanted to).

And here is the finished product...

Click for larger version...

Now you have a static element that is always available for switching to different views, composing documents, etc. In the case of this example, I was able to do away with the common navigation on the left-side of the screen, which was essential since the views had many columns and I wanted to prevent the users from having to scroll.

The great thing about this technique besides its simplicity is the fact that it can be styled almost anyway you would like, so if your database UI standards are updated, you just have to make a quick change to the Action Bar properties in one design element. Below is a sample I whipped up stealing some icons from Yahoo! You can download the database if you want to check it out in more detail.

Thanks for stopping by...have a great weekend!

Technorati tags: ,

Labels: , , ,

permalink | leave a comment