A progress bar in Lotus Notes

Do you like the image below?

progress bar in lotus notes client

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:

  1. Create 2 computed-for-display text fields next to eachother (no space in between).
  2. 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?
  3. Give the first field a brighter font color (like the green I used) and the second field some gray or something.
  4. 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.
  5. The first field gets this value:
    @Repeat("g";@Round(Score/MaxScore*20))
  6. The second field gets this value:
    @Repeat("g";20-@Round(Score/MaxScore*20))
  7. 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?

Progress bar in notes client with shadow

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.

15 Comments

  1. Amazing one! really fantastic.. i was lookin at volumes of code n u made it so simple

    Reply
  2. :-) Thank you. Sometimes I found myself coding a lot for what is in essence a very simple thing. On those moments we ‘d better take a step back and rethink what we’re trying to achieve, I believe.

    Reply
  3. 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.

    Reply
  4. 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.

    Reply
  5. Bummer, sounded promising to me, but if it doesn’t work any better than using Windings, there’s probably not much use for it.

    Reply
  6. 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?

    Reply
  7. Thanks, Ken!
    Of course you can do so, more visitors are always welcome!

    Reply
  8. 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

    Reply
  9. Thanks! If you find good uses for it, you can let us now!

    Reply
  10. Hi Martin,

    Awesome tip! These are my favorite kinds, simple and easy to implement. Thank you for sharing!

    Reply
  11. 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

    Reply
  12. Thank you for sharing this tip! It is a very nice and simple solution…really good work!

    Reply
  13. This is cool..I am trying to use this when exporting lot of documents to excel. Can this be done?

    Reply
  14. Hi Martin,
    Although this looks awesome, I’m unable to replicate this in my environment. I am getting an error while trying to view the form with those fields.
    Error Message : Field”A”: Incorrect Data Type for operator or @Function:Number Expected.

    Please advice :(

    Reply
  15. I am regular reader, how are you everybody? This post posted at this site is in fact
    nice.

    Reply

Trackbacks/Pingbacks

  1. BizzyBee’s BizzyThoughts » Blog Archive » A Notes Mail Database Size Indicator - [...] Our local admin asked me if this is doable, and I thought it was a brillant idea and a …

Leave a Reply to Vaibhav Cancel reply

Your email address will not be published. Required fields are marked *

+ 67 = 68

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>