This past week I was lent out as a contractor to The Davies Project, a Harold Shapiro venture that focuses on the history of US libraries. The part that I worked on involved putting online about 10,000 cards that described U.S. libraries prior to 1876 (apparently a banner year in terms of library information, everything before that date is very murky). The most important thing was having a decent query interface, so that would-be researchers could use to find whatever esoteric information was needed.

The end result was this query page. Initially, all that I had was the "Basic" interface. This has two disadvantages: it was rather intimidating for the user to see all those fields at once, and it didn't support the same field being used twice (e.g. to specify a date range). Therefore, inspired by the Mail.app and Finder rule/search UI, I came up with the "Advanced" tab.

To actually implement the UI, I used some very basic DOM objects and methods. The entire query form is a table, and each new clause is a row. The complete solution is in fact not pure DOM, in that the controls are not generated by creating additional DOM elements, rather the innerHTML of the respective cells is set to whatever is appropriate. This makes swapping the contents of the middle row very easy, since I don't have to destroy/create nodes, I can just replace the contents.

To keep track of the various clauses, no parallel array is needed. Rather, upon form submission, the table is walked and the values of the various form controls are extracted (controls of the same type have the same name attribute, making them easy to find). This is used to generate a custom SQL WHERE clause that is then passed on to DBToolbox.

This cushy part of this project was the requirement that it only had to work with IE 6. Firebird was use for some sanity checking (and better JavaScript error reporting), but the site isn't guaranteed to work with other browsers. Maybe after my thesis is due I can do better.