The ABCs of HTAs: Scripting HTML Applications

  • Article

HTAs

Add Color Options to a List Box

One of the main reasons people are attracted to HTAs in the first place is the fact that HTAs enable you to overcome some of the limitations of the command window. If all you want to do is display white Courier text on a black background, well, then the command window is probably all you need. HTAs become attractive when you want to move beyond the meager formatting options found in the command window.

Note. A couple years ago the Scripting Guys were strongly encouraged to promote these limitations as being the advantages of the command window. “Don’t tell people that these are disadvantages,” we were told. “Tell people that these are good things, that the command window is really nice because it saves you from having to make decisions about colors and font sizes and stuff like that. Make it really positive that you can’t do any formatting.” We agreed to take the suggestion under advisement.

What does this all mean? Well, it means that as long as you’re going to use HTAs you should – at least when it makes sense to do so – take advantage of the formatting options available to you. For example, suppose you have a list box that loads up computer names and you’d like to somehow distinguish between servers and workstations. Or suppose you load up file names in a list box and you’d like to distinguish between read-only files and read-write files. In the command window, about the best you can do is type some names in all-uppercase letters and some in all-lowercase letters. But in an HTA you can go one better: not only can you display these items in a list box, but you can actually change the background color of specific items as well.

Don’t feel bad; half the time we don’t know what we’re talking about either! Let’s show you a picture instead:

List Box

There; that’s better. So how did we manage to color options 2 and 4 in yellow? Well, what we did was create our list box on the fly, using this code:

For i = 1 to 10
    Set objOption = Document.createElement("OPTION")
    objOption.Text = "Option No. " & i
    objOption.Value = i
    If i = 2 or i = 4 Then
        objOption.style.backgroundcolor = "yellow"
    End If
    AvailableComputers.Add(objOption)
Next

Here’s what’s going on. Inside a loop (which runs from 1 to 10) we create an instance of the Option object; that’s what this line of code does:

Set objOption = Document.createElement("OPTION")

We then specify Text and Value properties for the option. If you’ve done HTA or HTML programming this should all be very familiar to you.

The cool part comes next. We arbitrarily check to see if i is equal to 2 or 4; in a real script you might check to see if a file is read-only or a computer is a workstation. If i is equal to 2 or 4, we then set the backgroundcolor property of the option to yellow:

objOption.style.backgroundcolor = "yellow"

We then add the new option to a list box named AvailableComputers, then loop around and continue adding options.

Here’s the complete HTA code:

<html>
<head>
<title>Color Options</title>
<HTA:APPLICATION 
     ID="objColorOptions"
     APPLICATIONNAME="Color Options"
     SCROLL="yes"
     SINGLEINSTANCE="yes"
>
</head>

<SCRIPT Language="VBScript">

Sub Window_OnLoad

    For i = 1 to 10
        Set objOption = Document.createElement("OPTION")
        objOption.Text = "Option No. " & i
        objOption.Value = i
        If i = 2 or i = 4 Then
            objOption.style.backgroundcolor = "yellow"
        End If
        AvailableComputers.Add(objOption)
    Next
 
End Sub

</SCRIPT>

<body bgcolor="buttonface">

<select size="10" name="AvailableComputers" style="width:300" >
</select>

</body>
</html>

You might want to play around with some of the other style properties and see what else you can come up with. For example, here’s a subroutine that sets the backgroundcolor property of an option to navy and the color property to white:

For i = 1 to 10
    Set objOption = Document.createElement("OPTION")
    objOption.Text = "Option No. " & i
    objOption.Value = i
    If i = 2 or i = 4 Then
        objOption.style.backgroundcolor = "navy"
        objOption.style.color = "white"
    End If
    AvailableComputers.Add(objOption)
Next

And here’s what the resulting HTA looks like:

List Box