Developer

All together now: Four dialog box function controls in one easy script

Greg Shultz ends his DialogBox function series by demonstrating how to create drop-down list boxes. His completed script containing four types of dialog boxes helps you put it all together and easily collect data from your users.


At the beginning of this Daily Drill Down series, I showed you how to create a reusable DialogBox function. Next, I explained how to create text boxes, radio buttons, and check boxes to enhance the look and feel of your dialog boxes. Now I turn your attention to creating drop-down list boxes, analyzing the results returned from your dialog boxes, and pulling the whole thing together into one neat user-friendly package. I have also collected the information from the series and included the final product in a download.

Working with drop-down list boxes
Drop-down list boxes provide you with a neat way to prompt users to select from a list of possible items. A drop-down list box, often called a combo box, looks like a text box with an arrow at the end of the box. When the user clicks the arrow, a list of choices drops down and the user can select one of the items in the list.

Creating the drop-down list box control in HTML
To create a check box control, use the HTML <Select> tag in this format:

<Select Name=“name” Size=”#”>
<Option>choice</Option>
</Select>

The Name attribute is assigned a name that you’ll later use to reference the drop-down list box control from within VBScript. The Size attribute simply specifies how many of the options in the drop-down list box are visible in the dialog box. Between each of the Option tags, you’ll specify an item that you want to appear in the list box.

For example, if you want to create a dialog box that will prompt a user to select a department from a list, you can configure the drop-down list box control using these lines:
<p>Please select your department:<br>
<select name="Department" size="1">
  <option>Accounting</option>
  <option>Administration</option>
  <option>Sales</option>
  <option>Warehouse</option>
  <option>Customer Relations</option>
  <option>Marketing</option>
</select></p>


If you were to insert these lines in the HTML dialog box template, the dialog box generated by the DialogBox function would look like the one shown in Figure A.

Figure A
Inserting the drop-down list box control commands shown above into the HTML dialog box template and then sending it to the DialogBox function would generate this dialog box.


Analyzing the drop-down list box control in VBScript
Handling the results from a drop-down list box in VBScript is similar to handling radio buttons and check boxes because you use the Elements object. However, instead of being stored in an array, items from a drop-down list box are stored in a special type of array called a collection. This means that additional steps are required to obtain the results from a drop-down list box. Let’s take a closer look:
Set DropDownDialog = IEDbx.Document.Dbx.Elements
Set DropDownItem = DropDownDialog("Department")
For Each Item in DropDownItem.Options
  If Item.Selected Then
    Depart = Item.Text
  End If
Next
MsgBox Depart


As you can see, the first thing I do is establish an object variable called DropDownDialog that can now be used to reference the Elements object. I then set up another object variable called DropDownItem to access the items in the collection. This collection is referred to the name assigned by the drop-down list box in the HTML code—in this case, Department.

Now, when I set up the For Each…Next looping statement, I can access the collection using the DropDownItem object variable and the Options property. I then use an If…Then statement to test the Selected property, which will contain the Boolean value True if that particular item was selected from the drop-down list box. If so, I then assign the value stored in the Text property, which is the name of the selected item, to the Depart variable. At this point, I use the MsgBox function to display the contents of the Depart variable, which now contains the name of the department that was selected in the drop-down list box.

Putting it all together
Now that you have a good idea of how dialog box controls are created in HTML and handled in VBScript, let’s put them all together. Listing A shows the HTML code for a dialog box that contains all the controls we have covered in this Daily Drill Down series. To create this file, I started with the HTML Dialog Box template that I presented in a previous article and then added the code for each of the dialog box controls.

Listing A: AllTogether.htm
  1. <html>
  2. <head>
  3. <title>TroubleShooter</title>
  4. </head>
  5. <body bgcolor="#D3D1CF" scroll="no">
  6. <script language="VBScript">
  7. <!—
  8. Dim Continue
  9. Sub Window_OnLoad()
  10. Continue = 0
  11. End Sub
  12. Sub button1_OnClick
  13. Continue = 1
  14. End Sub
  15. Sub button2_OnClick
  16. Continue = 3
  17. End Sub
  18. Public Function ClickButton
  19. ClickButton = Continue
  20. End Function
  21. '—>
  22. </script>
  23. <form name="Dbx">
  24. <p>Please type your first and last name:<br>
  25. First name: <input type="text" size="20" name="fname"> <br>
  26. Last name: <input type="text" size="20" name="lname"></p>
  27. <p>Please select your department<br>
  28. <select name="Department" size="1">
  29. <option>Accounting</option>
  30. <option>Administration</option>
  31. <option>Sales</option>
  32. <option>Warehouse</option>
  33. <option>Customer Relations</option>
  34. <option>Marketing</option>
  35. </select></p>
  36. <p>Please select you computer </p>
  37. <div align="left"><table border="0" width="350">
  38. <tr><td width="50%">
  39. <input type="radio" name="Comp" value="Compaq Deskpro EN">Compaq Deskpro EN<br>
  40. <input type="radio" name="Comp" value="Dell Dimension L">Dell Dimension L<br>
  41. <input type="radio" name="Comp" value="Gateway Profile">Gateway Profile
  42. </td><td width="50%">
  43. <input type="radio" name="Comp" value="Compaq Deskpro EXD">Compaq Deskpro EXD<br>
  44. <input type="radio" name="Comp" value="Dell Dimension 4100">Dell Dimension 4100<br>
  45. <input type="radio" name="Comp" value="Gateway Profile">Gateway Performance
  46. </td></tr></table></div>
  47. <p>Please select the applications installed on your computer </p>
  48. <div align="left"><table border="0" width="200">
  49. <tr><td width="50%">
  50. <input type="checkbox" name="App" value="Word">Word<br>
  51. <input type="checkbox" name="App" value="Excel">Excel<br>
  52. <input type="checkbox" name="App" value="Access">Access</td>
  53. <td width="50%">
  54. <input type="checkbox" name="App" value="PowerPoint">PowerPoint<br>
  55. <input type="checkbox" name="App" value="Outlook">Outlook<br>
  56. <input type="checkbox" name="App" value="FrontPage">FrontPage</td>
  57. </tr></table></div>
  58. <p><input type="button" name="button1" value="    OK    ">
  59. <input type="button" name="button2" value=" Cancel "></p>
  60. </form>
  61. </body>
  62. </html>

The only difference between this version and the individual sections I presented earlier is that I’ve placed the radio button and check box controls in tables in order to better format the dialog box. Each table has one row and two columns. I then split the controls between the two rows.

In line 37 I specified that the table for the radio buttons is 350 pixels wide. Then in lines 38 and 42, I specified that each column width is 50 percent. In line 48, I specified that the table for the check boxes is 200 pixels wide. Lines 49 and 53 set the column width to be 50 percent. Setting the table width in pixels and the column width in a percentage makes it easy to adjust the size of the table so that the controls fit nicely.

When the AllTogether.htm file is sent to the DialogBox function, this HTML code will generate the dialog box shown in Figure B.

Figure B
The AllTogether.htm file will create this dialog box.


Creating dialog box controls the visual way
While you can create dialog box controls simply by typing the appropriate HTML form commands in a text editor such as Notepad, you’ll have much better success if you use a visual HTML editor. You can then load the HTML dialog template into the editor and visually create your dialog box controls. There are literally hundreds of shareware HTML editors that you can download from the Internet. If you have Microsoft Office, you can even use FrontPage. However, for the simple job of creating dialog boxes for use in VBScript, I prefer to use Microsoft FrontPage Express, the little HTML editor that made its first appearance in Windows 98 and Internet Explorer 4.0. While Microsoft doesn’t officially support FrontPage Express anymore, you can still download a copy of it from Microsoft’s Internet Explorer 5.01 Service Pack 1 site. Once you download the FrontPage CAB file, simply open it in WinZIP. Don’t worry about installing it—just create a folder on your hard disk and copy all the files from the CAB file to that folder. You can then create a shortcut to FrontPage Express’ executable file—Fpxpress.exe—and place it on your desktop or Start menu. FrontPage Express runs fine in Windows 9x, Windows NT, and Windows 2000.

Dialog box driver script analyzed
The dialog box driver script, AllTogether.wsf, is shown in Listing B. To create this file, I started with the Windows Script File Driver template that I presented in the previous article and then added the VBScript for analyzing the dialog box controls.

Listing B: AllTogether.wsf
  1. <?XML Version="1.0" ?>
  2. <?job error="true" debug="true"?>
  3. <job id="VB Code"> 
  4. <script language="VBScript" src="FDialogBox.vbs"> 
  5. <![CDATA[ 
  6. Dim IEDbx, FileSystem, DbxFile,  Cancel
  7. Set WshShell = WScript.CreateObject("WScript.Shell")
  8. Set FileSystem = CreateObject("Scripting.FileSystemObject")
  9. Set IEDbx = WScript.CreateObject("InternetExplorer.Application")
  10. Cancel = False
  11. DbxFile = "AllTogether.htm"
  12. Call DialogBox(100, 60, 486, 383, Cancel, DbxFile)
  13. If Cancel Then
  14. IEDbx.Quit
  15. Set IEDbx = Nothing
  16. Wscript.Quit
  17. End If
  18. FirstName = IEDbx.Document.Dbx.fname.Value
  19. LastName = IEDbx.Document.Dbx.lname.Value
  20. Set DropDownDialog = IEDbx.Document.Dbx.Elements
  21. Set DropDownItem = DropDownDialog ("Department")
  22. For Each Item in DropDownItem.Options
  23. If Item.Selected Then
  24. Depart = Item.Text
  25. Exit For
  26. End If
  27. Next
  28. Set DropDownDialog = Nothing
  29. Set DropDownItem = Nothing
  30. Set RadioButtonDialog = IEDbx.Document.Dbx.Elements("Comp")
  31. For Each RadioButton in RadioButtonDialog
  32. If RadioButton.Checked = True Then
  33. Comp = RadioButton.Value
  34. Exit For
  35. End If
  36. Next
  37. Set RadioButtonDialog = Nothing
  38. Set CheckBoxDialog = IEDbx.Document.Dbx.Elements("App")
  39. List = ""
  40. For Each CheckBox in CheckBoxDialog
  41. If CheckBox.Checked = True Then
  42. List  = List & vbCrLf & CheckBox.Value
  43. End IF
  44. Next
  45. Set CheckBoxDialog = Nothing
  46. Results = "You chose the following:" & vbCrLf &_
  47. FirstName & " " & LastName  & vbCrLf &_
  48. Depart & vbCrLf &_
  49. Comp & vbCrLf &_
  50. List
  51. MsgBox Results
  52. IEDbx.Quit
  53. Set IEDbx = Nothing
  54. ]]>
  55. </script>
  56. </job>

The VBScript code used to analyze the results from each of the dialog box controls is basically the same as the individual sections I showed you earlier. There are a few differences, due to the fact that all the code appears in one file. In lines 28 and 29, I reset the DropDownDialog and Set DropDownItem object variables by using the Set command to assign their contents to the VBScript Nothing keyword. This is basically a clean-up step that releases any memory and system resources associated with the object variables. As you’ll notice, I repeated this operation in lines 37 and 45 for the other interim object variables.

You’ll also notice that in lines 30 and 38 I added the names of the dialog box controls to the Elements object. This focuses the Elements object on a specific control and is necessary in this dialog box because it contains multiple controls.

In lines 46 through 50, I compile the results from the various dialog box controls and assign them to a variable called Results. I then use the MsgBox function to display those results, as shown in Figure C.

Figure C
The AllTogether.wsf file will display the results in a simple message box.


Conclusion
The reusable DialogBox function is a handy feature I use often in my daily coding life. It's flexible, easy to master, and comes with a whole host of features you can use to manipulate the options presented to the user. In this Daily Drill Down series, I’ve shown you how to populate your HTML dialog box files with text boxes, radio buttons, check boxes, and drop-down list boxes. I’ve also shown you how to work with the results in VBScript. By now, you should have an excellent handle on creating your own dialog boxes using this Daily Drill Down series as your guide.

About Greg Shultz

Greg Shultz is a freelance Technical Writer. Previously, he has worked as Documentation Specialist in the software industry, a Technical Support Specialist in educational industry, and a Technical Journalist in the computer publishing industry.

Editor's Picks