Genii Weblog

Civility in critiquing the ideas of others is no vice. Rudeness in defending your own ideas is no virtue.

Thu 15 Jan 2004, 02:21 PM
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.