Tabbed table, refresh, and file upload control

hcl-bot · February 25, 2009, 6:26am

Hi Everyone,

I was hoping to gain some insight on some things for my newly created web credit application. It consists of two parts, one for the client and one for the web and it’s the web part I’m having a challenging time with.

On the web, I’ve used a tabbed table, so I have three forms (traditional paper documents) contained with one form, so use of a tabbed tables works out well, however there’s a refresh issue I keep running into as it pertains to the file upload control when moving from one page to another and then back again. I have searched the forum and someone suggested to “code it in css”. For the past 10 years, I have developed mostly for the client, so developing an application for the web can be quite challenging. My questions are:

Do I have to throw out my current design and start over if this involves CSS resources?
Is there a better way to emulate back and forth buttons within a table structure so there’s no browser refresh?
Would it have been better to design the form in a third-party tool using HTML and form elements and dump that into Domino?
If the answer to #3 is yes, how can one post data from a form to a Domino form? I’m sure this question has been asked tons of times, but any help would be appreciated.

Steve

hcl-bot · February 25, 2009, 7:30pm

Subject: Tabbed table, refresh, and file upload control

Hi Steve, I agree with Arshad, tabbed tables on the web – ugh!

I was in your shoes a couple of years ago, and thought of throwing in the towel until I ran into this wonderful Db that Scott Good & Henry Newberry demo’d at Lotusphere 2006 that you can download from here:

http://www.scottgood.com/jsg/blog.nsf/d6plinks/SGOD-6LDTCB

You don’t have to go the whole CSS route, you can still use tables & add some

tags & Javascript & voila … you have tabbed tables with no page reloads! This is one of my favourite Dbs – lots of goodies contained therein.

hcl-bot · February 25, 2009, 9:39pm

Subject: RE: Tabbed table, refresh, and file upload control

Hi Judy,

I found a great example of tabbed tables (non-Lotus) in the Iris Sandbox earlier today and I’ve used a CSS element and some javascript in the JS header and I have to say, it’s quick and there are no page reloads/refreshes, however, I do have elements on my pages that require refreshes because I’m doing @DBLookups. When the page gets reloaded, the focus changes from the page (table) I’m on, back to the first table and I’m not sure how to maintain the focus after those reloads happen. Any ideas would be appreciated.

Steve

hcl-bot · February 25, 2009, 11:36pm

Subject: RE: Tabbed table, refresh, and file upload control

You can do the lookups without Domino refreshes as well. Search for @DbLookup and Ajax.

hcl-bot · February 26, 2009, 7:22am

Subject: RE: Tabbed table, refresh, and file upload control

Hi Stan,

Thanks for your answer on the @DbLookup and Ajax. The main issue I’m running into at the moment is with my hide-whens. I have two of them which I need to keep and whenever the browser is refreshed, it throws the focus back to my first table in the form.

At this point, I’ve been able to get rid of using $TableName field and setting that field with by back and next buttons because I wanted to get away from the use of tabbed tables. Now I have 4 simple tables, using DIV tags between them, I have CSS code in the HTML body content piece which performs the visible, invisible functionality and some javascript in the JS header which performs the back and next. It works great except for the focus problem when my hide-whens activate. Any ideas on restoring the $TableName functionality to anchor the table focus would be appreciated.

Steve

hcl-bot · February 26, 2009, 7:32am

Subject: RE: Tabbed table, refresh, and file upload control

Use DHTML hide-whens as well. You can flip the display property of a field (or a small div containing both the field label and the field, or a table row that contains the field label and field, etc.) from “none” to “” (which will revert the object to its default display property).

hcl-bot · February 26, 2009, 9:34am

Subject: RE: Tabbed table, refresh, and file upload control

What I did to ensure the correct tab was maintained in case of page reloads was to set a field on the document that saved which tab I was on, then interrogate that field in the OnLoad event & set the display=none or block appropriately.

If need be, you can pass the current tab in the URL as well, and grab it from the Query_String_Decoded field.

Perhaps there are slicker ways of doing it, but that worked for me.

hcl-bot · February 26, 2009, 10:10am

Subject: RE: Tabbed table, refresh, and file upload control

Hi Judy & Stan,

I’m just kind of stuck at this point with getting and maintaining the focus on a particular table after a refresh. I’ve been trying to use document.getElementById(‘table_id’);focus() with no luck in my button clicks when switching from table to table. I’m not sure if I’m doing this properly, but my learning curve is pretty steep in terms of DHTML and haven’t really had much time since I’ve been so used to using standard Notes elements.

I’ve created a field at this point to track the table I’m on, but I’m not sure if I can use @getFocusTable to do what I want to do or not. Any other suggestions would be appreciated.

Steve

hcl-bot · February 26, 2009, 11:31am

Subject: RE: Tabbed table, refresh, and file upload control

Have you got IDs assigned to your tabs, and your tables? Then your OnClick event on your tab should be setting your CurrentTab field on the form as well as doing your hide-whens and any other style setting.

Let’s say you’ve got tabA, tabB, and tableA, tableB as your IDs. Then when you click on your 2nd tab, you fire off a function like: showTab(‘B’).

And, it could do stuff like this (code mostly lifted from the DemoCSS.nsf I referenced earlier) – this could all be in your JSHeader:

// Define the on and off colors for every level of your table.

// There may be as many table levels as you require.

// level one colors (only using 1 level of tabbed tables on this form)

var onColor = “#003399”; // colors for the tabs when selected (the background should be set to match)

var offColor = “#CCD6EB”; // colors for the tabs when unselected

var textOnColor = “white”; // text color on the selected tab

var textOffColor = “navy”; // text color on the unselected tab

// the alpha-suffixes for the Tab elements (eg. tabA & tabTextA) in use on this form

var tabChars = “ABC”;

function showTab(tabNum){

for (tb = 0; tb < tabChars.length; tb++){

	// loop through all tab_ and body_ element alphabetically

	curChar = tabChars.charAt(tb);

	curTab = document.getElementById("tab" + curChar);

	if (curTab){

		// there is a tab with this letter

		curBody = document.getElementById("table" + curChar);

		curTab.bgColor = eval("offColor");

		// JLK added ...

		// remove right border on right-most tab to make it line up with frame right-side border

		if (tb == tabChars.length - 1){

			curTab.style.borderRight = "0 none white";

		}

		curBody.style.display = "none";

		curText = document.getElementById("tabText" + curChar);

		curText.style.color = eval("textOffColor");

		curText.style.fontWeight = "normal";

	}

}

liveTab = document.getElementById("tab" + tabNum);

liveBod = document.getElementById("table" + tabNum);

liveBod.style.display = "block";

liveTab.bgColor = eval("onColor");

liveTab.style.borderBottom = "0 none navy";

liveText = document.getElementById("tabText" + tabNum);

liveText.style.color = eval("textOnColor");

liveText.style.fontWeight = "bold";

// store the tab the user clicked to retain tab highlight when user navigates back here

document.forms[0].CurrentTab.value = tabNum;

}

And, in your onLoad event, run:

showTab(document.forms[0].CurrentTab.value);

Hope that helps.

hcl-bot · February 26, 2009, 11:58am

Subject: RE: Tabbed table, refresh, and file upload control

DemoCSS.nsf - Would you by chance have a copy of this database? I have searched high and low for it and it’s nowhere to be found.

I’ve all but given up on the focus thing. I’ve got all my hide-whens (visible/invisible) working through Javascript and CSS, but this focus thing eludes me.

The examples I’ve taken to get me this far came from the Iris Sandbox and it’s called DHTML.nsf. There are good examples of javascript and CSS working together, but again, the focus item, just not working after a Notes-style hide-when refreshes the page. I feel like I’m hitting the wall at this point.

If you have a copy of the DB, please send it to me: steve_treible@yahoo.com

Steve

hcl-bot · February 25, 2009, 10:00am

Subject: Tabbed table, refresh, and file upload control

Hi Reed

Coding Domino apps for the web is more fun than you think…

I can imagine it can be a bit daunting to get into it at first but now I find that Domino web apps are much better to program and much more flexible esp with things like Ajax floating around.

My advice to you would be to get a quick tutorial on DHTML and CSS and more importantly DO NOT use Notes tabbed tables for the web - frankly they are hideous!!!

Look at the followng site for examples which you can pick and implement in your apps:

http://www.dynamicdrive.com/

However, if you do insist on using Notes tabbed tables then try this tip:

http://searchdomino.techtarget.com/tip/0,289483,sid4_gci783778,00.html

HTH

A