protogeek.com
Photography Work Resume
sidebar

Portfolio: QueryBuilder

QueryBuilder Editor


screenshotThe QueryBuilder Editor relies heavily on DHTML and a JavaScript object hierarchy to display context-sensitive form fields to build query criteria, as well to establish AND/OR relationships between rows of different criteria, and groups of rows. Using the last row in the screenshot as an example, hen a user selects "was sent mail" from the first dropdown in a row, another dropdown will appear with items that are relevant, such as "mailing" and "product". When "mailing" is selected, the next dropdown displays available relationship types of, such as "=", "any of", or "all of". Selecting "=" would display a dropdown list of all mailings from the past 6 months and allow the user to select only one. Selecting "any of" or "all of" causes the list of mailings to allow the user to select multiple mailings. The green dots seen in the screenshot indicate that each row is complete and valid. Because for many of the option paths there are multiple valid stopping points (for example, in the first row, the user could have stopped after selecting the Last-Minute Airfares product rather than going on to select a subproduct), as well as some fields that take direct user input (such as a date) that require the value to match a specific format, each row displays a red dot when the row's content is not complete and valid, and a green dot when it is. Note that this is all completely handled client-side using JavaScript and DHTML.