Twisties are the small triangle-shaped icon which can be added to Notes views to show that a line in the view can be expanded or collapsed. While twisties are an option for Notes client users, they are always used for web browsers clients for categories. Although twisties are commonly used in Notes applications, they are not a familiar interface in web applications. Web users often try to click on the category name and not the twistie and get confused when nothing happens.

Use the links on the left to see the difference!

The solution is to remove the twisties and make the category text the link so it expands or collapses when selected.

This is a two step process:

1) "Steal" the twistie link and place it on the category text.

2) Hide the twisties from the user.

Twistie links are calculated for each view and for each category that Domino produces. The twistie links change from view to view. The HTML source for a twistie link reveals the following format:

<A HREF="DB.Nsf/ViewName!OpenView&Start=1&Count=100&Expand=3#2">

You can "steal" the twistie link and reference it in the view's category column using JavaScript. The following code will look for the first HTML link before your category text. This will be the twistie's HTML link. It then writes this link as the category's new link. Add the following JavaScript code to the column formula for the category, replacing the "CategoryName" with the text, field, or formula to display for the category:

At this point you have copied or "stolen" the HTML link from the twistie and used it in the category column. The user can now click on the category text to expand or collapse the view.

The twistie will still be displayed at this point possibly causing confusion. There is no way to get rid of the twistie as Domino places it there automatically. Also, remember in the step above we used the link from the twistie to create the category link, so, we still need it on the web page. The next best thing is to hide it.

To do this you will replace the twistie image with a very small transparent GIF image. For the purposes of this tip, the transparent image is called clear.gif. You will have to create the clear.gif file and place it in the image resources for the database. Create it as a 1 X 1 pixel image with a transparent background. (You can also get it from the link supplied below.) The code below will search through the images in the web page (the view) looking for the collapse.gif and the expand.gif that Domino supplied for the twisties. Place the following code in the JS Header event of either the view template for the view or in a form where the view is embedded:

var pathname = window.location.pathname.toLowerCase();

filename = pathname.substring(0,(pathname.lastIndexOf('nsf')+4)) function imagereplace()

{ for(i=0;i<document.images.length ;i++)

{

if( (document.images[i].src.indexOf('expand.gif')!=-1))

{

document.images[i].src= filename + 'clear.gif' ;

document.images[i].height='1' ;

document.images[i].width='1'

}; if( document.images[i].src.indexOf('collapse.gif')!=-1)

{

document.images[i].src= filename + 'clear.gif' ;

document.images[i].height='1' ;

document.images[i].width='1'

} }

}

The code above must run when the page loads. Enter the following JavaScript code in the Forms onLoad event (remember - JavaScript IS case-sensitive):

imagereplace();

This will place the code to call the imagereplace function in the <body> tag of the page. This method works well but you may see for an instant some of the twisties before the JavaScript code has a chance to replace them.

To download the clear.gif file use the link on the left.

This tip was supplied by Kevin Marshall, a noted lecturer and consultant on Domino web applications. Kevin is also the course instructor for TLCC's newest course, Beginner R5 Domino Web Application Development. This course builds on your Notes development skills and adds the knowledge and skills you need to unleash Domino as a world class web development platform to create cool dynamic web sites.

Kevin can be reached at his web site.

Click here for more information on the web application development course.