{"id":67183,"date":"2006-06-05T13:11:00","date_gmt":"2006-06-05T13:11:00","guid":{"rendered":"https:\/\/blogs.technet.microsoft.com\/heyscriptingguy\/2006\/06\/05\/how-can-i-dynamically-add-controls-to-an-hta\/"},"modified":"2006-06-05T13:11:00","modified_gmt":"2006-06-05T13:11:00","slug":"how-can-i-dynamically-add-controls-to-an-hta","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/scripting\/how-can-i-dynamically-add-controls-to-an-hta\/","title":{"rendered":"How Can I Dynamically Add Controls to an HTA?"},"content":{"rendered":"

\"Hey, \n

Hey, Scripting Guy! How can I dynamically add controls to an HTA?

— TR<\/P>\"Spacer\"\"Hey,\"Script<\/A> \n

Hey, TR. Dum-de-dum-dum. Dum-de-dum-de – oh, wait : you were talking to us<\/I>, weren\u2019t you? Sorry; we saw the word \u201cdynamically\u201d and figured this question must have been addressed to someone else. When people hear the words Scripting Guys<\/I> they think of all sorts of things, but \u201cdynamic\u201d usually isn\u2019t one of them.<\/P>\n

And no, TechNet won\u2019t allow us to print the words people do<\/I> associate with the Scripting Guys.<\/P>\n

OK, now that we know that we\u2019re<\/I> supposed to answer the question we better get down to business. First of all, we should note that the real<\/I> answer to your question is, \u201cIt depends.\u201d After all, the exact method for dynamically adding controls to an HTA depends on what type of control you want to add and what you want those controls to do. (For example, do you want a script to run when the control is clicked?) Therefore, we\u2019re going to show you a somewhat-generic method for adding dynamic controls to an HTA and for determining whether or not that control has been clicked. That probably won\u2019t solve your actual problem, but, with any luck, it should be enough information to get you started.<\/P>\n

We should also note that if you have no idea what we\u2019re talking about, HTA is short for HTML Application. Among other things, HTAs utilize the Internet Explorer object model as a way to provide a graphical user interface for a script; that means you can create a script that looks like a real application, complete with radio buttons and drop-down lists and what-have-you. For more information, check out our HTA Developers Center<\/B><\/A>.<\/P>\n

And now, back to our regularly-scheduled program.<\/P>\n

Our sample HTA is pretty simple. It consists of a window with a single button, labeled Add Button<\/B>. Each time you click Add Button<\/B>, a new button is added to the screen; if you click any of those new buttons, a subroutine will report back the ID of the button that was clicked. When you first start up the HTA it looks something like this:<\/P>\"Hey, \n


No, it\u2019s not<\/I> very fancy at the moment. But don\u2019t worry: we\u2019re not done yet.<\/P>\n

As you can see, the code for our HTA isn\u2019t much fancier:<\/P>

<script Language=”VBScript”><\/p>\n
    intButtonCount = 1<\/p>\n
    Sub AddButton\n        strHTML = DataArea.InnerHTML       \n        strHTML = strHTML & “<input id=” & intButtonCount & ” type=” & Chr(34) & “button” & Chr(34) & _\n            ” value= ” & Chr(34) & “Button ” & intButtonCount & Chr(34) & ” onClick=” & Chr(34) & _\n                “NewButtonSubroutine” & Chr(34) & “>”\n        DataArea.InnerHTML = strHTML\n        intButtonCount = intButtonCount + 1\n    End Sub<\/p>\n
    Sub NewButtonSubroutine\n        Set objButton = window.event.srcelement\n        strID = objButton.id\n        Msgbox “You clicked Button ID ” & strID\n    End Sub<\/p>\n
<\/script><\/p>\n
<body>\n    <input id=addbutton type=”button” value=”Add Button” onClick=”AddButton”>\n    <span id=DataArea><\/span>\n<\/body>\n<\/PRE>\n
So how exactly does this all work? Let\u2019s break the HTA down into subsections and see if we can answer that question. For starters, take a look at the <body><\/B> tag. As you can see, there isn\u2019t much there; all we have is the HTML code for adding a button, along with this tag:<\/P>
<span id=DataArea><\/span>\n<\/PRE>\n
That\u2019s not much, but it\u2019s important. The <span><\/B> tag sets aside a named area of our HTA; as you\u2019re about to see, once we have a named area we can then dynamically add items to that area. That\u2019s step 1 in the process: in order to add new controls to an HTA you need a designated area within the HTA where controls can be added. Make sense? Good.<\/P>\n
Oh: note that we\u2019ve given this spot the ID DataArea. We\u2019ll need to use that ID any time we refer to this portion of the HTA.<\/P>\n
Next, let\u2019s take a look at the AddButton subroutine; this is the subroutine that gets called each time we click Add Button<\/B>. As you might expect, this is also the subroutine that dynamically adds controls each time the button is clicked (and thus each time the subroutine is called).<\/P>\n
The first thing we do inside this subroutine is assign the value of DataArea\u2019s InnerHTML<\/B> property to a variable named strHTML:<\/P>
strHTML = DataArea.InnerHTML\n<\/PRE>\n
The InnerHTML property represents all the HTML coding contained within the DataArea span. For all intents and purposes, that means information about all the controls, text, images, etc. within that span is now stashed away in the variable strHTML.<\/P>\n
That brings us to this nightmarish line of code:<\/P>
strHTML = strHTML & “<input id=” & intButtonCount & ” type=” & Chr(34) & “button” & Chr(34) & _\n    ” value= ” & Chr(34) & “Button ” & intButtonCount & Chr(34) & ” onClick=” & Chr(34) & _\n        “NewButtonSubroutine” & Chr(34) & “>”\n<\/PRE>\n
Yes, we know what it looks like. But let\u2019s explain what\u2019s going on here and see if that helps any. All we\u2019re doing is assigning a new value to strHTML: this time it\u2019s getting the existing value of strHTML (all the current controls, text, images, etc.) plus<\/I> HTML code for adding a brand-new button. The portion of the code for adding a brand-new button looks like this:<\/P>
“<input id=” & intButtonCount & ” type=” & Chr(34) & “button” & Chr(34) & _\n    ” value= ” & Chr(34) & “Button ” & intButtonCount & Chr(34) & ” onClick=” & Chr(34) & _\n        “NewButtonSubroutine” & Chr(34) & “>”\n<\/PRE>\n
Believe it or not, that gobbledygook resolves to the code required to add a new button to the HTA. As you probably know, the HTA tag for a button looks like this:<\/P>
<input id=1 type=”button” value=”Button 1″ onClick=”NewButtonSubroutine”>\n<\/PRE>\n
Those elements – and only those elements – are present in our crazy line of code. However, we did have to make a few modifications:<\/P>\n\n\n\n\n\n
\u2022<\/TD>\n\n
The HTA tag for a button includes a number of double quotes (e.g., type=\u201dbutton\u201d<\/B>). In VBScript, all string values must be enclosed in double quotes, and putting double quotes within double quotes can be tricky. Therefore, we simply replaced the double quotes with their ASCII equivalent: Chr(34)<\/B>. See all the Chr(34) notations in our code? Those are just double quotes. If you see \u201ctype=\u201d & Chr(34) & \u201cbutton\u201d<\/B> you can simply read that as type=\u201dbutton\u201d<\/B> (which is exactly how the script reads it).<\/P><\/TD><\/TR>\n
\u2022<\/TD>\n\n
If we want to be able to distinguish between buttons then each button needs to have a unique ID. To do that we defined a global variable named intButtonCount at the beginning of our <script><\/B> tag, and assigned intButtonCount the value 1. Each time we add a new button we then increment intButtonCount by 1. What does that mean? That means our first new button will have an ID of 1, our second new button will have an ID of 2, etc. That\u2019s why the button ID is assigned the value of intButtonCount. Like so: id=” & intButtonCount<\/B>.<\/P><\/TD><\/TR>\n
\u2022<\/TD>\n\n
We also want each button to have unique label. Therefore, we set the value (label) of each button to the word Button<\/I> plus the button ID. That\u2019s what happens here: ” value= ” & Chr(34) & “Button ” & intButtonCount & Chr(34)<\/B>.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
Got all that? If not, don\u2019t fret. Instead, just slowly walk through the line of code piece-by-piece, substituting the current value of intButtonCount as needed, and sticking in double quote marks any time you see Chr(34). Sooner or later it should start making sense. If it doesn\u2019t substitute in this line of code, which adds a button without an ID, a label, or an onClick event:<\/P>
strHTML = strHTML & “<input type=” & Chr(34) & “button” & Chr(34) & “>”\n<\/PRE>\n
That button won\u2019t look like much and it won\u2019t actually do anything, but once you understand how we created that very simple button you can start adding additional parameters such as value, id, and onClick.<\/P>\n
After we\u2019ve assigned a new value to strHTML we then set DataArea\u2019s InnerHTML property to that new value:<\/P>
DataArea.InnerHTML = strHTML\n<\/PRE>\n
The net effect? We\u2019ll have a new, dynamically-created button within our HTA. Click Add Button<\/B> a few more times and you\u2019ll have all sorts of new buttons on the HTA:<\/P>\"Hey, \n
Etc.<\/P>\n
Now, what about being able to distinguish between buttons 1, 2, and 3? Well, each button we add is configured to call the same subroutine (NewButtonSubroutine) any time someone clicks the button. That subroutine looks like this:<\/P>
Sub NewButtonSubroutine\n    Set objButton = window.event.srcelement\n    strID = objButton.id\n    Msgbox “You clicked Button ID ” & strID\nEnd Sub\n<\/PRE>\n
Inside the subroutine we use the first line of code to create an object reference to the window.event.srcelement<\/B> object. This object represents the item that fired the event triggering the subroutine. In other words, if we click button 2, then the window.event.srcelement is equal to button 2.<\/P>\n
As soon as we have an object reference we can assign the button ID to a variable named strID; after that we can use the Msgbox<\/B> function to echo back the ID of the button that was clicked:<\/P>\"Hey, \n

Not very fancy, but you get the idea.<\/P>\n
As we noted, this probably doesn\u2019t fully<\/I> answer your question, TR, but we hope it gets you headed down the right path. If you need more specific information, just let us know.<\/P>\n
And remember: if you want to make sure we see your email, don\u2019t use words like dynamic. Instead, use a subject line like Hey, You Lousy, Good-for-Nothing Bums<\/B>. You can bet that<\/I> email will get to us, even if it\u2019s not specifically addressed to us!<\/P><\/p>\n","protected":false},"excerpt":{"rendered":"
Hey, Scripting Guy! How can I dynamically add controls to an HTA?— TR Hey, TR. Dum-de-dum-dum. Dum-de-dum-de – oh, wait : you were talking to us, weren\u2019t you? Sorry; we saw the word \u201cdynamically\u201d and figured this question must have been addressed to someone else. When people hear the words Scripting Guys they think of […]<\/p>\n","protected":false},"author":595,"featured_media":87096,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[3,4,5,30],"class_list":["post-67183","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scripting","tag-scripting-guy","tag-scripting-techniques","tag-vbscript","tag-web-pages-and-htas"],"acf":[],"blog_post_summary":"
Hey, Scripting Guy! How can I dynamically add controls to an HTA?— TR Hey, TR. Dum-de-dum-dum. Dum-de-dum-de – oh, wait : you were talking to us, weren\u2019t you? Sorry; we saw the word \u201cdynamically\u201d and figured this question must have been addressed to someone else. When people hear the words Scripting Guys they think of […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/67183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/users\/595"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/comments?post=67183"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/67183\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media\/87096"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media?parent=67183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/categories?post=67183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/tags?post=67183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}