I’m having some fun in a legacy application at work. The Lotus Notes/Domino forms I am creating and maintaining are embedded into an ActiveX frame (like a portal).

Prior to this application, I think all of my development has been under the assumption that the Domino generated HTML form was the only form. Hence, document.forms[0] was my standard. Well, now that I’m working in this embedded application, that isn’t always true. I’ve had to rewrite some of my javascript to work with the current form.

The first thing I had to create was a function to get the current form.

function getMyForm(field) {
// returns form element
	if (typeof(field) == "string") {
		for (var i = 0; i < document.forms.length;i++) {
			if (document.forms[i][field] != null) {
				return document.forms[i];
			}
		}
	} else {
		if (field.length >= 0) {
			var element = field[0];
		} else {
			var element = field;
		}
		while (element != null) {

			element = element.parentElement;
			if (element.tagName == "FORM") {
				return element;
				break;
			}

		}
	}

}

I am still debating how to implement the next function. I wasn’t sure if I should pass the form into the function, expect that I already have it (bad design), or get it using the function above. I actually do a mixture of the last two options.

function getFieldValues(field) {
// Returns array of values. Depends on getMyForm.
	var value = new Array;
	if (typeof(form) == "undefined" || form == null || form.tagName != "FORM") {
		form = getMyForm(field);
	}
	if (typeof(field) == "object") {
		var theField = field;
	} else if (typeof(field) == "string") {
		var theField = form[field];
	} else {
		var theField = form[field.name];
	}

	if (theField == null) { // Exit quietly if field cannot be found.
		window.status = "Cannot get value for field:" + field.toString();
		return [''];

	}

	if (theField.length == null && theField.options == null) {
		if (theField.type == "checkbox" && theField.checked == false) {
			value =  [''];
		} else {
			value =  [theField.value];
		}
	} else if (theField.options != null) {
		for (var i = 0; i < theField.options.length;i++) {
			if (theField.options[i].selected == true) {
				if (theField.options[i].value === "") {
					value.push(theField.options[i].text);
				} else {
					value.push(theField.options[i].value);
				}
			}
		}
	} else if (theField.length >= 0) {
		for (var i = 0; i < theField.length;i++) {
			if (theField[i].checked == true) {
				value.push(theField[i].value);
			}
		}
	}
	if (value.length == 0) {
		value = [''];
	}
	return value;
}

I also have a function to set the value(s) of any field.

function setFieldValue(field,values) {
// Sets array of values. Depends on getMyForm.
	if (typeof(form) == "undefined" || form == null || form.tagName != "FORM") {
		form = getMyForm(field);
	}
	if (typeof(field) == "object") {
		var theField = field;
	} else if (typeof(field) == "string") {
		var theField = form[field];
	} else {
		var theField = form[field.name];
	}
	if (typeof(values) == "object") {
	} else {
		values = [values];
	}
	if (theField == null) { // Exit quietly if field cannot be found.
		window.status = "Cannot set value for field:" + field.toString();
		return;

	}
	if (theField.length == null && theField.options == null && theField.type != "checkbox") {
		theField.value = values[0];
	} else if (theField.options != null) {
		for (var x = 0; x < values.length;x++) {
			for (var i = 0; i < theField.options.length;i++) {
				if (theField.options[i].value == values[x] || (theField.options[i].value == "" &&
				 theField.options[i].text == values[x])) {
					theField.options[i].selected = true;
				}
			}
		}
	} else if (theField.length >= 0) {
		for (var x = 0; x < values.length;x++) {
			for (var i = 0; i < theField.length;i++) {
				if (theField[i].value == values[x] || (theField[i].value == "" &&
				 theField.options[i].text == values[x])) {
					theField[i].checked = true;
				}
			}
		}
	} else if (theField.type == "checkbox" && values[0] !== "") {
		theField.checked = true;
	}
}

Finally, a function to set the focus of a field (if it can find it).

function setFocus(field) {
	if (typeof(field) == "undefined" || field == null) {
		return;
	}
	var value = new Array;
	if (typeof(form) == "undefined" || form == null || form.tagName != "FORM") {
		form = getMyForm(field);
	}
	if (typeof(field) == "string") {
		var theField = form[field];
	} else {
		var theField = form[field.name];
	}
	if (theField == null || theField.name === "") {
		window.status =  "Unable to set focus for field " + field;
		return;
	}
	if (theField.length == null || theField.options != null) {
		theField.focus();
	} else if (theField.length >= 0) {
		theField[0].focus();
	}
}

This is nothing new for a lot of developers and frameworks like jQuery and Prototype handle a lot of this. But in many instances, you're stuck in legacy code that doesn't allow you to throw in frameworks (or you really don't want to have to explain what you're doing to the other developers).

I discovered a small bug in the rendering of HTML in R8. It was discovered when a user was opening forms sent to a shared mailbox on an R8 server.

The Problem
Lotus Notes R8 was overlapping fields when rendering a table in the browser.

Here is what the user saw on an R8 server:

Here is what it looks like in R6:

The Cause
Spanned table cells/rows. In R8 (or possibly R7) Lotus decided it would help us out by rendering empty table rows (TR tags) with a style of “display:none.” Unfortunately, this affects rows that are being used by the ROWSPAN tag.

Here are the merged cells in the Notes Designer:

Here are the split cells:

In the browser (both versions) Notes tries to render the tables with a series of COLSPAN and ROWSPAN tags to render the table exactly the way it is displayed in the designer.

Here is the HTML from the R6 version:

2. Company #: (3 digits)  

Cost Center #: (7 digits)








Phone Number:(
 ) 
 -






Fax Number:(
 ) 
 -

Here is the HTML from the R8 version:

2. Company #: (3 digits)  

Cost Center #: (7 digits)








Phone Number:(
 ) 
 -






Fax Number:(
 ) 
 -

Notice the


tags? I am no HTML expert but it seems to cause issues with the ROWSPAN for cost center.

The Solution
We’re screwed. Seriously. Only testing will discover these strange renderings. I fixed the problem above by deleting the three unnecessarily merged rows. Hopefully, this was a freak occurance but be aware of how R8 is rendering your HTML.

Make this (beware… it’s a Microsoft Link) the standard web view control for ASPX/Domino pages. It might be overkill but it has every feature you would want in a web table. Sorting AND filtering. Try the filter… it’s pretty sweet.

He also posted Douglas Crockford’s JSON API. It looks much more complete than the plain-old eval statements I was using.