This entry was posted on Friday, August 31st, 2007 at 5:06 pm and is filed under IBM Lotus Notes, Interface. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
BizzyBee’s BizzyThoughts
Think Outside The Hive - About Notes and Web
A progress bar in Lotus Notes
Do you like the image below?

No? And if I tell you that it is more than an image? It’s a screenshot from the Notes Client. It’s a progress bar that shows the computed result of some calculation. It’s not done with API’s, C Plus Pluses, Java Swing Wawa’s or memory leak producing raping of the client. It’s in formula and with a very simple trick. It’s so simple and obvious that everybody could have thought about that. Did I grab your attention now?
I was working on a project were some numbers were shown, representing the number of holidays used for an employee. I was thinking about a way of presenting this a little fancier and user-friendly, so I needed a way to present this graphically, as with a progress bar saying that x % of the total was used/done.
After doing some research on the web (without satisfying results), the light bulb in my head showed itself. This is how you do it for 1 progressbar:
- Create 2 computed-for-display text fields next to eachother (no space in between).
- Set the font for the fields to “Webdings”. In this font, the letter “g” represents a little block. You see where we are heading to?
- Give the first field a brighter font color (like the green I used) and the second field some gray or something.
- You also need 2 datafields giving the value and the maximum value, say we call them “Score” and “MaxScore”. The values of these fields will function as a source for the progress bar.
- The first field gets this value:
@Repeat("g";@Round(Score/MaxScore*20)) - The second field gets this value:
@Repeat("g";20-@Round(Score/MaxScore*20)) - That’s it!
The numbers “20″ in the code are the different steps that are possible, adjust according to your needs.
You can do some styling by changing the font size, the colors, font properties, or even the used symbol. In the following example I used a shadowed font. Neat huh?

The only restriction on this technique is that you need to have webdings as a font, so this means you’ll probably need a Windows machine to display them. But I’m sure you’ll find ways to make it visible for your customers, even on other platforms.
Articles
Da Honey Pot
About me

(4 votes, average: 4.25 out of 5)
September 29th, 2007 at 12:26 pm
Amazing one! really fantastic.. i was lookin at volumes of code n u made it so simple
October 1st, 2007 at 8:25 am
October 8th, 2007 at 8:40 pm
Martin, that’s plain brilliant. I can’t think of a simpler, more effective way to do it.
I have one suggestion as to what might just make this technique more robust on systems that are lacking Webdings: Unicode character 2588 is a full block as well. So, chosing this character (like copying it from the Windows character table) with any unicode font might work on Mac clients as well. I did not test it, and I’m not sure how say a missing Arial font is replaced on the Mac, but I could imagine, that it will at least be a sans-serif unicode font.
October 9th, 2007 at 12:01 am
Good idea about that unicode character! I tried it: in Windows it worked well with Arial, but no success in OS X. I tried unicode 2588 (OS X knows Arial too), I tried differenf fonts etc etc. No luck yet. It’s getting really late so the searching is for another time.
October 9th, 2007 at 2:14 pm
Bummer, sounded promising to me, but if it doesn’t work any better than using Windings, there’s probably not much use for it.
October 25th, 2007 at 1:26 pm
Martin, this is absolutely great.
I am in the process of publishing an article in ‘The View’ about Notes Client development tips, and I would very much like to have this one in the article.
I would, of course, give you full credit for the tip plus list your site as a reference.
Is this OK with you?
October 25th, 2007 at 1:43 pm
Thanks, Ken!
Of course you can do so, more visitors are always welcome!
October 26th, 2007 at 9:40 am
Martin,
this is a cool tip, i can think of about 10 uses for it almost straight away, i’m a big fan of simple
nice work
October 26th, 2007 at 10:41 am
Thanks! If you find good uses for it, you can let us now!
November 9th, 2007 at 3:50 pm
Hi Martin,
Awesome tip! These are my favorite kinds, simple and easy to implement. Thank you for sharing!
November 9th, 2007 at 4:06 pm
Thank you Chris! I’m a fan of you and your site, so I’m happy to hear this!
If you want to, you can link to this article from your site, because I can use some traffic to keep me motivated (does this sound pathetic? maybe a little ;-))
Greetings,
Martin
January 11th, 2008 at 3:11 pm
[…] Our local admin asked me if this is doable, and I thought it was a brillant idea and a very practical example on how to use this tip: A progress bar in Lotus Notes […]