API
@-Formulas
JavaScript
LotusScript
Reg Exp
Web Design
Notes Client
XPages
 
R6 Update: Allow users to click on twisty or category title
We posted a tip (Allow users to click on twisty or category title) several months ago that talks about how to trick the web browser into having a category name be "clickable" in addition to just the twisty.

By default, in Domino applications, when you are displaying a categorized view, only the twisty can be clicked to expand or collapse the view. Until Lotus ever decides to put in a view setting "allow category name to expand/collapse", you have to build it yourself. The code we gave you (Allow users to click on twisty or category title) is very generic and works on any categorized view. Before Domino writes the category name, you write some JavaScript to the browser. The JavaScript you write is an open <a> tag. The URL for the <a> tag is the URL that Domino just wrote around the twisty. So it's very generic - whatever Domino generates you use.

All this still works in version 6, so that's not where this tip is going. In version 5 and before of Domino, the HTTP Server put in an ALT tag of "+ " for a view twisty pointing to the right, and an ALT tag of "- " for a view twisty pointing down. In Domino 6, this was changed. For a view twisty pointing to the right, the ALT tag is now "Show details for " followed by the category name. For a view twisty pointing down, the ALT tag is now "Hide details for " followed by the category name. This change is more compliant with accessibility because screen readers can now understand what is going to happen if the twisty image is clicked.

To implement the category title being clickable in addition to the twisty, the "category name" ends up being some JavaScript to build an HTML <a> tag, then the true category name, then more JavaScript to close the HTML <a> tag. So, under Domino 6, the ALT tag for the twisty image will end up being "Show details for " followed by the category name, which is the JavaScript. So you end up with an ALT tag of:

Show details for [<script language="JavaScript">document.write("<a href='" + document.links[document.links.length-1].href + "'

Pretty ugly, huh? In order to revert back to the way it used to be in R5 (which is not the ideal situation for screen readers, but it's better than the ALT tag that is generated), you need to do a couple of things:

First, whatever $$ViewTemplate is used to display the view needs to call a JavaScript function once the page is loaded. So the onLoad JavaScript event will call a function (in addition to anything else you might be doing) named fixAltTags();

Second, the "fixAltTags" function needs to be defined in the JSHeader section of the view template. This will go through all the ALT tags on all the images. Those that start with "Show details for" (which is what the Domino 6 server automatically generates) will be converted to "+ ", and those that start with "Hide details for" will be converted to "- ". ALT tags that don't start with either of those phrases will be unaffected. Here is the code to place in JSHeader:

function fixAltTags() {
    if (document.images.length == 0) { return; }
    if (!document.images[0].alt) { return;}
    for (var i=0; i<document.images.length; i++) {
        if (document.images[i].alt.indexOf("Show details for") == 0) {
            document.images[i].alt = "+ ";
        }
        if (document.images[i].alt.indexOf("Hide details for") == 0) {
            document.images[i].alt = "- ";
        }
    }
}

The first thing the code wants to do is check to see if the "alt" property is available on images. For Internet Explorer, it will be there. For other browsers, it may or may not be there. So check to see if it's present on the first image. (First, check to see if there really is a "first" image to evaluate).

Next, go through all the images. Check to see if the ALT tag starts with one of our key phrases that Domino generates (indexOf == 0 means the phrase is found at the very start of the string). If so, replace it with the appropriate R5 version. If it doesn't start with one of the key phrases, leave the ALT tag alone. So none of your other images on the view template will be harmed (unless, of course, you defined your ALT tag to start with one of the two key phrases).