My Portal Project

I mentioned a while back that I was handling some development overflow around the office and I got stuck trying to convert a Notes app to the browser, where no forethought for this contingency had been used by the developers. There are a hundred things, about doing this type of conversion, that I hate, but a big one is the use of tabbed tables. Unfortunately, in this app they are everywhere.

Tabbed tables are a nice way to compact collections of fields that are repetitive and related, but they do NOT translate nicely to the browser, and I despise the official Domino way of making them work easier, which involves exposing all of the fields with the “Generate HTML for all fields” setting. If I want all of my fields exposed, I’ll do it thank you very much. Not to mention, this method involves a round trip to the server…teh?

So I though I would just highlight a basic example of how I make tabbed tables work in a Domino environment. First, I do not keep the Domino tabbed tables, so if you cannot use a seperate form for your browser presentation then this method will not work as it involves removing the fields from the tabbed table and placing them in tables by themselves. Each table is placed sequentially on the form from top to bottom. In my example, I have only two tabs: Week 1, and Week 2. So after this first step, I have two tables with the “Week 1″ table above the “Week 2″ table.

Then I wrap the tables in <DIV> tags. My “Week 1″ table is wrapped like this:

<div id="wk1" style="display:block">

With the </DIV> tag at the bottom of the “Week 1″ table. The “Week 2″ table has the same thing but the Display style is set to ‘none’. This will show the Week1 table by default when the form loads.

Directly above the first table <DIV> tag I have this HTML that creates the “tabs”.

<span class="tabControl" style="background-color:#A5D1A5">
<a href="#" onClick="toggleVisibility('wk1')">Week1</a></span>
<span class="tabControl" style="background-color:#FFFFD0">
<a href="#" onClick="toggleVisibility('wk2')">Week 2</a></span>

The “tabControl” class just defines some font and padding styles, so you should set these to your styles. Then finally, I use this basic Javascript in the header:

var wkArray = new Array('wk1','wk2');
function toggleVisibility(sId){
	for(x=0; x < (wkArray.length) ; x++){
		if(sId == wkArray[x]){
			document.getElementById(wkArray[x]).style.display='block';
		}else{
			document.getElementById(wkArray[x]).style.display='none';
		}
	}
}

When you click on the “Week 1″ link, you pass the ‘wk1′ parameter to the toggleVisibility function which changes the display style of the div, and hides any other divs that are listed in the “wkArray” array.

No round trips, you have better control over how your tabs look, and you still keep all the same field names. One down side, if you do any totaling of fields, you will need to do it with javascript, which you most likely are doing anyway.

This entry was posted on Tuesday, October 11th, 2005 at 7:53 pm and is filed under Notes/Domino, Code Bin, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.