Genii Weblog

Text popups on web and Notes client

Thu 15 Jan 2004, 02:21 PM

by Ben Langhinrichs
Notes/Web Coexistence Tip #5

I hope to see many of you at Lotusphere, and especially at my session on Advanced Lotus Notes/Web Coexistence on Tuesday at 2:30pm in the Swan Pelican.  (Download the Lotusphere 2004 Sessions DB I created and you can even mark it down and keep track of which other sessions you'll have to find in repeats.) 

I have really enjoyed writing some technical content on other topics besides rich text, so I thought I'd throw another one at you to whet your appetite for the Lotusphere session.  Let me know if you think these coexistence tips are valuable  (see Tip #1Tip #2Tip #3 and Tip #4 if you missed them).

O! Water cold we may pour at need
down a thirsty throat and be glad indeed;
but better is Beer, if drink we lack
and Water Hot poured down the back.
- J.R.R. Tolkien - "The Lord of the Rings"

While I am a major proponent of using constructs that work in both the Notes client and on the web, one of the points I will make in my session is that there are times when you need to code separately for the two clients.  The goal is to make sure that such different codings are minimized and that the maintenance of the two is as easy as possible.  One area for which there is no good single coding is the area of popup text.

The problem
In the Notes client, you have long been able to create popup text.  In R3, you had to click on the highlighted text to see the text popup, but in either R4 or R5 (I don't remember which), it became possible, and even the default, to mouse over the highlighted text, which then displayed in a small floating box.  In R5, it also became possible to show text highlights, which are my favorite way of indicating text with a popup value.  Here is an example.  It is a not infrequent complaint that these do not translate to the web.  See this recent thread started by Bruce Stemplewski on the Notes 4&5 Gold forum as an example.

The single coding solution (not so great, but easy to code)
The only real answer, besides "It can't be done",  I have ever seen given to this problem is to use a JavaScript hotspot action which uses an alert to create a popup and sets the underline to indicate it should be clicked.  Here is an example.  This is not a bad approach, especially if you have users who are used to the web, but it is not a great approach either.  You lose the popular mouseover effect.  Your machine dings at you when an alert box is shown.  You don't have that cool highlighted text look.  On the other hand, maintenance is easy, since there is just one source for the popup text and the alert looks pretty much the same in both.

The hack solution (closer to Notes client text hotspot, but a bit more coding)
So, what could we do that would keep the mouseover effect, keep the highlighted text, popup in both the Notes client and on the web in the same way, but keep the code together for maintainability. It requires a bit of thinking outside the box.

Step 1) Create the popup text for the Notes client, with the text "This is a popup message" .  Here is an example.  Sorry, you won't see it because you are running from a web client, but trust me, it is there.

Step 2) Create a computed text just before the highlighted text.  The formula in this case will be:

@If(@ClientType = "Web"; "["+"<a style=\"text-decoration: none; background: #ffffc2\" onclick=\"return false;\" title=\"This is a popup message\">"; @IsDocBeingEdited; "<HACK>"; "")

and you should click on the font tab for the computed text and make the text Red.

Step 3)  Create another computed text directly after the highlighted text, also in Red.  The formula for this should be:

@If(@ClientType = "Web"; "</a>"+"]"; @IsDocBeingEdited; "</HACK>"; "")

Step 4) Step back and admire your work.  Here is the example that actually works.  This works in both the Notes client and on the web, and looks almost precisely the same.  

By the way, in the Notes client, you will see just the word example when reading the document, but in edit mode you will see <HACK>example</HACK>, which is your big clue that you are using this hack.

There are a few problems with this approach, especially with maintenance, since you need to change the popup message twice, once in the Notes popup text and the other time in the computed text, but the red <HACK> should help you remember.  Some of you might also object that the same highlighting effect could be used with the JavaScripot alert.  This is true, but since the mouseover effect is desired and expected by Notes client users when the highlighted text is seen, this would be counter-intuitive.

So, what do you think?  Is it really better to drink the Beer and bathe in the Water Hot in this case?

Copyright 2004 Genii Software Ltd.

What has been said:

93.1. Stan Rogers
(01/15/2004 05:08 PM)

Which still leaves us with the question, "why doesn't the mouseover render in HTML?"

I like your solution from a developer's persective (it'll be great on forms and pages), but it isn't nearly as neat as doing it right would have been. It is, indeed, pouring cold water down the throat for thirst's sake alone. A happy hobbit would see the Domino elves do the pop-ups for him.

93.2. Ben Langhinrichs
(01/15/2004 07:06 PM)

Of course I agree, but I can't really change how IBM does this, and I can change how Midas does this, so...

93.3. Stan Rogers
(01/16/2004 01:38 PM)

Great Beer, Ben -- now if I could get the folks I work for to buy a keg or two (my list of reasons has grown yet again).

93.4. Lance Spellman
(01/18/2004 10:04 PM)

I'm afraid I disagree with the basic premise. While I understand that a single form can serve both clients. Ultimately I've found that code maintenance and readability is actually improved when there's a specific form for each client. But then, perhaps this perspective is colored a bit by how the HTML version is typically built (i.e. eliminating the built in Notes constructs for web development as much as possible.) I don't say this with rancor, as I love the Domino platform, but it just feels cleaner to keep the designs separate and achieve best of breed for each. Just my 2 cents.

93.5. Ben Langhinrichs
(01/18/2004 10:22 PM)

As I discuss in my session, you definitely have to know when to say "No" and go ahead and create separate design elements. The problem is, it usually does feel cleaner and simpler to create two design elements... when the application is first written. The most compelling reason for coexisting designs comes over time, when changes made in one client are not reflected in the other. The more that each is "best of breed", the worse the problem, because it is very hard to make the same change in both when each is implemented differently. The cost for making maintenance and small changes goes up dramatically, even if the initial creation was not that expensive.

Now, that may not be compelling to a BP who is just looking to make the app and disappear, but it is very compelling to the company which wants to recoup its investment, and keep using the application over an extended period of time. Again, that is just my opinion, but I have had a lot of positive fedback about this approach, especially when I have been able to show that with only a small amount of effort, many design elements can be shared even though the designers had assumed they would need to be separate.

93.6. Manuel Nientit
(24.05.2004 01:46)

I read about your idea in the Lotus Notes Forum and I have to admit that this idea is as funny as it is easy, but since this does not work for other fields than editable text fields I am not convinced.

Maybe this would be an idea to look after?

I like your talk about beer, elves and hobbitses :-)


93.7. Mouny
(06/29/2004 03:02 PM)

Hi Ben,

I need a text popup on web for dialog box

(Allow multivalues is selected).

When the cursor is on the list box I need to show the selected value as a text popup.

Please let me know how I can do this.

Thank you in advance.