Text popups on web and Notes client
Thu 15 Jan 2004, 02:21 PM
by Ben Langhinrichs
Notes/Web Coexistence Tip #5
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 #1, Tip #2, Tip #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.
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 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.