Developer

Take your pick: These three script dialog boxes make it easy to interact

Interact with users in a whole new way with the essential dialog box controls you'll learn to create in this Daily Drill Down by Greg Shultz. He examines three popular types of dialog boxes: text boxes, radio buttons, and check boxes.


In the Daily Drill Down ”Create your own reusable dialog box for Windows Script Host,” I showed you how to create the reusable DialogBox function. I also showed you how to create a template for the HTML dialog box and a template for the Windows Script File that calls the DialogBox function and manipulates the results.

In order to really use the DialogBox function to its full potential, you need to know how to create text boxes, radio buttons, and check boxes for your dialog boxes.

In this Daily Drill Down, I’ll show you how to use HTML form tags to populate the HTML dialog box template with text boxes, radio buttons, and check boxes.

Working with text boxes
When you want to prompt users to type unique responses in a dialog box, you’ll use the text box control. The text box control is probably one of the easiest controls to work with—both in HTML and in VBScript.

Creating the text box control in HTML
To create a text box control, use the HTML <Input> tag in this format:

<Input Type=”Text” Size=”size” Name=”name”>

To identify this as a text box, the Type attribute is specified as Text. The Size attribute simply specifies how large to make the text box. The Name attribute is assigned a unique name that you’ll later use to reference the text box control from within VBScript.

For example, suppose you want to create a dialog box that will prompt a user to fill in his or her first and last name. You’ll configure the text box control with these lines of HTML code.

To make the text box large enough for the typical name, I set the size attribute to 20. I then assigned each text box a unique name to hold the value that the user will type in; in this case, fname for the first name and lname for the last name.

If I add these lines into the HTML dialog box template and configure the Windows Script File to send the file to the DialogBox function, I end up with the dialog box shown in Figure A. I’ll show you where to add these lines to the HTML dialog box template a little later. For now, let’s move on to the VBScript.

Figure A
Inserting the text box control commands shown above into the HTML dialog box template and then sending it to the DialogBox function generates this dialog box.


Analyzing the text box control in VBScript
Once you add the HTML code for creating the text box control to the HTML file that will make up the contents of your dialog box, you’ll need to use VBScript to determine exactly what the user typed in. Since I chose to generate the dialog box from within VBScript using the Internet Explorer (IE) Application object, I can now use properties, methods, and subobjects of this object.

Namely, I can use the Document subobject, which represents the document displayed by IE. Through the Document subobject, I can access all the objects displayed in the currently loaded HTML file, including those contained in the form. To do so, I’ll use an object path that is made up of the IEDbx object variable, the Document subobject, the Dbx form name, the name associated with the control I want to access, and then a specific property or method of the control.

For example, to access the contents of the text box controls shown above, I’d use this VBScript code:

FirstName = IEDbx.Document.Dbx.fname.Value
LastName = IEDbx.Document.Dbx.lname.Value

In the first line, I use the IEDbx.Document.Dbx object path to access the text box control called fname and then access the Value property, which will contain whatever text was typed in the text box. I then assign those contents to the variable called FirstName. I use the same procedure to obtain the contents of the lname text box. I can now access and work with the information from the dialog box in VBScript.

Working with radio buttons
Creating radio button controls in your HTML dialog box is also a very easy operation. Radio buttons prompt a user to choose one of several options. A user can select only one radio button; if the user selects another radio button, the button that was previously selected is cleared.

Creating the radio button control in HTML
To create a radio button control, use the HTML <Input> tag in this format:

<Input Type=”Radio” Name=”name” Value=”value”>

In the case of a radio button, the Type is specified as Radio. The Name attribute is assigned a name that you’ll later use to reference the radio button control from within VBScript. However, unlike with the text box control, each radio button must have the same name. The Value attribute will hold a unique name that will correspond to the name associated with the radio button in the dialog box. You’ll extract this value later in your VBScript to determine which radio button the user selected.

For example, if you want to create a dialog box that will prompt a user to select his or her specific computer from a list of possible choices, you can configure the radio button control using these lines of HTML code.

Notice that each Name attribute is assigned the same name—Comp—and that each Value attribute is assigned the name associated with the radio button. If you were to insert these lines in the HTML dialog box template, the dialog box that would be generated by the DialogBox function would look like the one shown in Figure B.

Figure B
Inserting the radio button 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 radio button control in VBScript
Once you place the radio button control in the HTML file that will make up the contents of your dialog box, you’ll need to use script to determine exactly which radio button the user selected. Again, because I generated the dialog box from within VBScript using the IE Application object, I can use properties, methods, and subobjects of the Document object to access the objects contained in the form.

Just like before, I use the IEDbx object variable to access the radio button controls contained in the Dbx form. However, due to the way radio buttons are implemented, I have to reach into the Form object and access the Elements object. The Elements object is essentially an array of all the controls contained in the Form object.

In the case of my example computer selection dialog box, the array is made up of all the radio buttons. This means that to find out which radio button was selected, I have to use a looping structure to cycle through each element in the array. Fortunately, the radio button control has a property called Checked. This property is a Boolean value—True if the radio button was selected and False if not selected. To find out which radio button was selected, the loop must simply find that radio button whose Checked property is set to True. Let’s take a closer look:
Set RadioButtonDialog = IEDbx.Document.Dbx.Elements

For Each RadioButton in RadioButtonDialog
  If RadioButton.Checked = True Then
    Comp = RadioButton.Value
    Exit For
  End If
Next
MsgBox Comp


First, I establish an object variable called RadioButtonDialog, which can now be used to reference the array that is the Elements object. I then use a For Each…Next statement to cycle through the array. I assign each item in the array to the RadioButton variable and then use an If…Then statement to determine whether the Checked property is True. If it is, I assign the contents of the Value property to the Comp variable. I next use an Exit For statement to break out of the loop. At this point, I use the MsgBox function to display the contents of the Comp variable, which now contains the name of the computer associated with the selected radio button.

Working with check boxes
You can use check boxes in two ways in dialog boxes. You can use a single check box to prompt a user to either enable or disable some option. You can also use check boxes to prompt users to select more than one option from a list.

Creating the check box control in HTML
To create a check box control, use the HTML <Input> tag in this format:

<Input Type=”Checkbox” Name=”name” Value=”value”>

In the case of a check box, the Type is specified as Checkbox. The Name attribute is assigned a name that you’ll later use to reference the check box control from within VBScript. To make it easy to work with a group of check boxes in VBScript, each check box should have the same name. The Value attribute will hold a unique name that will correspond to the name associated with the check box in the dialog box. You’ll extract this value later in your VBScript in order to determine which check boxes the user selected.

For example, if you want to create a dialog box that will prompt users to select from a list of all the applications they have installed on their computer, you can configure the check box control using these lines.

As you can see, I assigned this group of check boxes the name App and assigned each value the name of the associated application. If you were to insert these lines in the HTML dialog box template, the dialog box that would be generated by the DialogBox function would look like the one shown in Figure C.

Figure C
Inserting the check box control commands shown above into the HTML dialog box template and then sending it to the DialogBox function would generate this dialog box.


If you want to create a dialog box that prompts a user to enable or disable some option, you can configure the check box control using these lines. In this case, the prompt just appears next to the check box (see Figure D).

Figure D
Inserting the check box control command shown above into the HTML dialog box template and then sending it to the DialogBox function would generate this dialog box.


Analyzing the check box control in VBScript
Now, the way in which you analyze the check box control in VBScript will depend on how many check boxes there are in the dialog box. If there is just one or if there are only a couple of check boxes in the dialog box, you can handle each one separately. However, if there are many check boxes, such as in the applications example, you’ll want to handle them using the Elements object array and a looping structure, like you do with radio buttons. However, because multiple check boxes can be selected, you’ll need to check every item in the array to find those check boxes whose Checked property is set to True. Let’s take a closer look at the VBScript that you’ll use to handle multiple check boxes:
Set CheckBoxDialog = IEDbx.Document.Dbx.Elements
List = ""
For Each CheckBox in CheckBoxDialog
  If CheckBox.Checked = True Then
    List  = List & vbCrLf & CheckBox.Value
  End IF
Next
MsgBox List


First, I create an object variable called CheckBoxDialog that can be used to reference the Elements object. I then use a For Each…Next statement to cycle through the array. I assign each item in the array to the CheckBox variable and then use an If…Then statement to determine whether the Checked property is True. If it is, I assign the contents of the Name property to the List variable and then begin the loop again. Once the loop is finished, I use the MsgBox function to display the contents of the List variable, which now contains the names of all the selected applications.

If there is just one check box, you’ll handle it as a separate entity. To do so, you just need to use the object path to access the contents of the check box control, similarly to the way you access the content of the text box control. For example, using VBScript to handle the result generated by the dialog box shown in Figure D might look like this:
If IEDbx.Document.Dbx.Enable.Checked Then
 Commands to enable option
End If


Here, I simply use an If...Then statement to test whether the Checked property is set to True and, if it is, perform some operation to enable the option. If the Checked property is set to False, that operation is simply bypassed.

If there are just a few check boxes to evaluate, you could use the Element object or you could handle each one separately. For example, let’s suppose that the application dialog box shown in Figure C only had three check boxes. You could use this structure to analyze the check box control.

To get started, I shorten the object path to the check box properties by assigning part of it to another object variable. This saves a lot of typing. Then, I use one-line If…Then statements to test whether the Checked property is set to True. If it is, I assign the contents of the name property to the List variable. Once each check box has been tested, I use the MsgBox function to display the contents of the List variable, which now contains the names of all the selected applications.

Conclusion
You’ve now learned how to create and script three very popular dialog boxes that you can use with the DialogBox function. By using a bit of creativity, you can manipulate the interface to ask just about anything from users with minimal scripting experience. Having a fundamental knowledge of these concepts can go a long way in your development as a VBScript editor.

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

Free Newsletters, In your Inbox