Browse All Articles > HTA - Hypertext Application tutorial
Use HTAs for rapid testing, early development, and in-house deployment.
This article describes how to create an HTA (Hypertext Application). To illustrate a common scenario, we will open an ADO recordset and display some of it in an HTML table -- with only a few lines of script. We'll be using JavaScript (actually, Microsoft's JScript) because it's a flexible scripting language and web developers are usually quite familiar with it. A little note: Browser compatibility is irrelevant here -- an HTA is executed by a program named MSHTA.Exe, a Microsoft/Windows-specific program.
An HTA (Hypertext Application) is basically an HTML file with the added feature that it is not constrained by the browser's scripting "sandbox." It is a "trusted application" so it can access ActiveX objects and launch executables without displaying that irritating warning box popup.
USES:
![Sample HTA shows some ADO output]()
I keep the following snippet as a sort of template -- a starting point for my HTAs:
Copy that snippet to a text file on your desktop. Rename it to test.HTA. Double click it, to see:
![The "minimal HTA" template]()
You may wonder about that [restart] button. It's just a convenience for use while developing. You will be using your favorite text editor to modify the HTML and the script, and as you make changes, you would normally need to exit and restart the HTA (or right-click and choose Restart). This button lets you leave the window open as you make minor tweaks to the source code. Make a change, save it, then click the [restart] button.
Access a database and show output
Now, let's make the HTA do something useful. Replace the DoTest() function with the following:
Getting User Input
It is very easy to add some input fields to the HTML and use the values. For instance, add this down near the bottom, where the HTML for the U/I lives:
And modify your DoTest() function and replace the var sSQL line with...:
![ADO Output filtered by user input]()
References
Here are some links to Microsoft that provide information useful in working with HTAs:
Overview:
http://msdn.microsoft.com/en-us/library/ms536496(VS.85).aspx
You can control some of the "look" and options of your HTA window (ignored here, because defaults work fine for the examples)
HTA:APPLICATION object
http://msdn.microsoft.com/en-us/library/ms536495.aspx
If you you want to launch a program with your HTA like this...
var oShell= new ActiveXObject("WScript.Shell");
oShell.Run( "notepad.exe " + gsAnyTextTextFile );
... then see:
WshShell Object
http://msdn.microsoft.com/en-us/library/aew9yb99(VS.85).aspx
Run Method (Windows Script Host)
http://msdn.microsoft.com/en-us/library/d5fk67ky(VS.85).aspx
General reference for HTML objects:
HTML Objects
http://msdn.microsoft.com/en-us/library/ms533054(VS.85).aspx
ActiveXObject Object (Windows Scripting - JScript)
http://msdn.microsoft.com/en-us/library/7sw4ddf8(VS.85).aspx
Access files and directories from your HTA!
The FileSystemObject object
http://msdn.microsoft.com/en-us/library/z9ty6h50(VS.85).aspx
ADO API Reference
http://msdn.microsoft.com/en-us/library/ms678086(VS.85).aspx
Access the Registry:
RegRead Method
http://msdn.microsoft.com/en-us/library/x05fawxd(VS.85).aspx
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
If you liked this article and want to see more from this author, please click the Yes button near the:
Was this article helpful?
label that is just below and to the right of this text. Thanks!
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
This article describes how to create an HTA (Hypertext Application). To illustrate a common scenario, we will open an ADO recordset and display some of it in an HTML table -- with only a few lines of script. We'll be using JavaScript (actually, Microsoft's JScript) because it's a flexible scripting language and web developers are usually quite familiar with it. A little note: Browser compatibility is irrelevant here -- an HTA is executed by a program named MSHTA.Exe, a Microsoft/Windows-specific
An HTA (Hypertext Application) is basically an HTML file with the added feature that it is not constrained by the browser's scripting "sandbox." It is a "trusted application" so it can access ActiveX objects and launch executables without displaying that irritating warning box popup.
USES:
Throw together a quick proof-of-concept or a demo to exercise an ActiveX object.
Provide a "front-end" U/I to set up a complex command-line needed to run command-line utility programs.
Use as a generic "batch file" tool to perform a sequence of operations but with the ability to accept input interactively and display output.
Provide a user-friendly U/I to drive such commonly-available application programs as Internet Explorer, Excel, Access, etc.; a way to use the COM-exposed functionality of the application without losing the user in the complex U/I of the program itself.
I keep the following snippet as a sort of template -- a starting point for my HTAs:
<html>
<script>
var gnWinCaption= "HTA tester";
var gnWinWide= 400;
var gnWinHigh= 300;
function DoStartup() { // called from BODY ONLOAD
SetWindowSize( gnWinWide, gnWinHigh ); // app init stuff
document.title=gnWinCaption;
}
function SetWindowSize(w,h) { // known bug in mshtml; try/catch fixes
try { window.resizeTo( w, h );}
catch(e){ SetWindowSize(w,h); } // do it until it works
}
//---------------------------------------------------
function DoTest()
{
// instantiate and exercise ActiveX objects, etc.
oDivDisplayArea.innerHTML="<b>test complete!</b>";
}
</script>
<!-- I like to put the U/I stuff at the bottom -->
<!-- ***************************************** -->
<body onLoad='DoStartup();'>
<DIV align=right><input type=button value="restart"
onclick= "document.location.reload();"></DIV>
<input type=button value='DoTest' onclick='DoTest();' </input>
<DIV ID=oDivDisplayArea>
<font color=gray>(stuff will be displayed here)</font>
</DIV>
</body>
</html>Copy that snippet to a text file on your desktop. Rename it to test.HTA. Double click it, to see:
You may wonder about that [restart] button. It's just a convenience for use while developing. You will be using your favorite text editor to modify the HTML and the script, and as you make changes, you would normally need to exit and restart the HTA (or right-click and choose Restart). This button lets you leave the window open as you make minor tweaks to the source code. Make a change, save it, then click the [restart] button.
Access a database and show output
Now, let's make the HTA do something useful. Replace the DoTest() function with the following:
var goDb;
var gsConnect= "DSN=Northwind;UID=;PWD=";
var adOpenStatic= 3; // constants used in oRs.Open(...)
var adLockReadOnly= 1;
var adCmdText= 1;
//---------------------------------------------------
function DoTest()
{
var sSQL="SELECT * FROM Customers ORDER BY CustomerID";
//--------------------------------------- open the db connection
goDb= new ActiveXObject( "ADODB.Connection" );
goDb.Open( gsConnect );
//---------------------------------------- open the recordset
var oRs= new ActiveXObject( "ADODB.Recordset" );
oRs.Open( sSQL, goDb, adOpenStatic, adLockReadOnly, adCmdText );
var sOutput="<TABLE border=3>";
while (! oRs.EOF ) {
var sOneLine= "<TR>";
sOneLine += "<TD>"+ oRs.Fields('CustomerID' ).Value + "</TD>";
sOneLine += "<TD>"+ oRs.Fields('CompanyName').Value + "</TD>";
sOneLine += "<TD>"+ oRs.Fields('City' ).Value + "</TD>";
sOneLine += "</TR>";
sOutput += sOneLine;
oRs.MoveNext();
}
sOutput += "</TABLE>";
oDivDisplayArea.innerHTML= sOutput; // show the output
}Getting User Input
It is very easy to add some input fields to the HTML and use the values. For instance, add this down near the bottom, where the HTML for the U/I lives:
Enter Key: <input type=text id='edKey'</input>And modify your DoTest() function and replace the var sSQL line with...:
var sKey= document.all.edKey.value; // get user input
var sSQL="SELECT * FROM Customers"
+" WHERE CompanyName LIKE '" +sKey+ "%' "
+" ORDER BY CustomerID"; 
References
Here are some links to Microsoft that provide information useful in working with HTAs:
Overview:
http://msdn.microsoft.com/en-us/library/ms536496(VS.85).aspx
You can control some of the "look" and options of your HTA window (ignored here, because defaults work fine for the examples)
HTA:APPLICATION object
http://msdn.microsoft.com/en-us/library/ms536495.aspx
If you you want to launch a program with your HTA like this...
var oShell= new ActiveXObject("WScript.She
oShell.Run( "notepad.exe " + gsAnyTextTextFile );
... then see:
WshShell Object
http://msdn.microsoft.com/en-us/library/aew9yb99(VS.85).aspx
Run Method (Windows Script Host)
http://msdn.microsoft.com/en-us/library/d5fk67ky(VS.85).aspx
General reference for HTML objects:
HTML Objects
http://msdn.microsoft.com/en-us/library/ms533054(VS.85).aspx
ActiveXObject Object (Windows Scripting - JScript)
http://msdn.microsoft.com/en-us/library/7sw4ddf8(VS.85).aspx
Access files and directories from your HTA!
The FileSystemObject object
http://msdn.microsoft.com/en-us/library/z9ty6h50(VS.85).aspx
ADO API Reference
http://msdn.microsoft.com/en-us/library/ms678086(VS.85).aspx
Access the Registry:
RegRead Method
http://msdn.microsoft.com/en-us/library/x05fawxd(VS.85).aspx
=-=-=-=-=-=-=-=-=-=-=-=-=-
If you liked this article and want to see more from this author, please click the Yes button near the:
Was this article helpful?
label that is just below and to the right of this text. Thanks!
=-=-=-=-=-=-=-=-=-=-=-=-=-
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (2)
Commented:
What is the problem with VB or perl? The Microsoft HTA tutorial pages use VBScript code.
Author
Commented: