Imagine creating a DropDownDataWindow look and feel using HTML form elements that can show more than one column in a ListBox on a Web page. The data elements could be generated using Web server-side technologies such as JavaServer Pages (JSP), Active Server Pages (ASP), and ColdFusion Markup Language (CFML). This look and feel is similar to the JTable class of Java or the DB grid control in Visual Basic.

In this article I'll demonstrate how to show an HTML element dynamically, depending on the user's action on a Web page. This code works both in Internet Explorer and Netscape browsers that support JavaScript and HTML 4.0.

Need for DropDownDataWindows
For Windows-based client/server applications, PowerBuilder has a neat feature called the DropDownData-Window that shows the multiple attributes of the data element. For example, in my current project I need to show an entry field or SingleLine-Edit (SLE) in which the user can enter the customer code. In case you don't know the customer code, it can be selected from the DropDownListBox (DDLB) by looking at the customer name and the state combination or any other column combination that describes the customer code. If the user interface is a combo box (DDLB) that contains all the information for a single row on the Web page, it would occupy a lot of horizontal space. If the user interface is a ListBox (LB), it would occupy a lot of horizontal and vertical space. The smarter user interface in this scenario would be to show a DropDownList only on demand. This is possible in PowerBuilder since we have a powerful DropDownDataWindow control. It's not available in the HTML world.

DropDownDataWindow in HTML
Using the current version of HTML (4.0 and greater) and JavaScript, we can create the look and feel of a DropDownDataWindow by showing the HTML ListBox form element dynamically. First, include the following JavaScript within the HEAD tag of the HTML page (see Listing 1).

Listing 1 has three major functions and one important array variable called arrayLink, which contains the form element that needs to be displayed dynamically on demand. In Listing 1 it's the HTML SELECT tag that creates a ListBox using the SIZE attribute of SELECT tag. It can be any HTML element, such as TABLE. displayMessage function has the HTML element as the first argument, the background color of the HTML element as the second argument, and the x, y coordinates as the third and fourth arguments, respectively, where the HTML element has to be shown on the Web page. The data in the arrayLink variable can be generated using JSP, ASP, or any other Web server-side scripting language. dropdownOn and dropdownOff functions actually show or hide the HTML element, respectively, when the user clicks on the down arrow Ð a Ò.gifÓ file on the Web page.

Next, add the HTML code in Listing 2 to the body section of the HTML page.
In Listing 2 notice how the dropdownOn and dropdownOff JavaScript functions are called by trapping the onmousedown event of the image (IMG) element of HTML. Care should be taken in defining the dynamic HTML tag Ð DIV and LAYER for the IE and Netscape browsers, respectively. Notice the ID and NAME attribute ÒdropdownÓ as it's referred to in JavaScript (see Figure 1). In addition, the stylesheet is used in the HTML code in Listing 2.

Pros and Cons
The technique shown in this article works only in browsers that support JavaScript and HTML 4.0. Both IE version 4.0 and above and Netscape 4.0 and above support it. I have a sample URL to demonstrate how it works, www.intac.com/~kaudata/customer.- htm. This code doesn't have other advanced client-side features of the DataWindow, such as sorting and filtering, but you can dynamically generate the data element using server-side scripting. Using this technique, you can save a lot of real estate on a Web page compared to the SELECT element of the HTML FORM.

Conclusion
With the growing trend toward Web-based applications, this kind of feature will be very useful since it's a popular look and feel in client/server applications. It helps to look at multiple attributes of a particular data element. Please contact me if you have any suggestions on improving the JavaScript code.

• Figure 1
• Source Code