Migrate from HTA to SPA

Microsoft HTML Application (HTA) technology is based on Internet Explorer. And this is obsolete and will soon be removed. A HTA is running with mshta.exe, which is existing outside Internet Explorer and a default part of Windows 11. But as it is based on Internet Explorer we must face that HTA is going away too. A solid indicator is that the HTA documentation at Microsoft is no longer maintained and placed in a historical path.

HTA is a quick and neat way to build a nice and dynamic GUI for local tools. This has made HTA rather popular for many years, and there are a lot of solutions based on HTA. So migrating from HTA will be a significant task to many.

You can take the opportunity to migrate to a more complete technology stack like .Net with C#, but there will be a lot new tools to learn. Some might consider to go with PowerShell, but both WinForms and WPF are quite complex with PowerShell in comparison to dynamic HTML in HTA.

Single-Page Application

Another suggestion I have seen (link) as a replacement to HTA is Single-Page Application (SPA), where it is possible to use dynamc HTML and make the solution local on the client.

This works fine on very simple things. It is even possible to make a sensible filestructure for the SPA with external script and style files. But when you want to work with external resources like a database or the content of a file you hit rock buttom!

With HTA you can access external resources through ActiveX models or objects like ActiveX Data Objects (ADO) or FileSystemObject. And modern web browsers can't handle ActiveX. There is a Internet Explorer setting in Microsoft Edge, but that will most likely be removed.
I think that the real problem to Microsoft here is security, as ActiveX has given a lot of trouble on the internet. The COM technology that ActiveX is build on is still solid and widespread.

The conclusion must be that HTA can't be migrated to SPA as most HTAs are working on external resources like files or databases.
If I find a good replacement to HTA I will let you know.

Start shared HTA with PowerShell

I have some tools made as HTML Applications (HTAs). And I am not the only one to use such a tool, but HTAs runs locally and still the tool must be updated for all users.
A solution is to have a launch script. In my case it is made in PowerShell. The launch script is called from a shortcut, that the user can either use from a fileshare or copy to a local place like the Windows Desktop.

The launch script is like this:
$Source_Folder = '\\filesrv42.sqladmin.lan\DBA\SqlAnchor\SqlAnchor_Hta'
$Destination_Folder = 'C:\SQLAdmin\SqlAnchor'
$SqlAnchor_Filenames = 'SqlAnchor.hta','anchor.ico','SqlAnchor.DetailPages.js'

# Make sure destination folder is available
if (!(Test-Path -path $Destination_Folder)) { New-Item $Destination_Folder -Type Directory }

# Copy HTA files
foreach ($Filename in $SqlAnchor_Filenames) {
  Copy-Item "$Source_Folder\$Filename" -Destination "$Destination_Folder\$Filename" -Force
}

# Start HTA
& "$env:SystemRoot\System32\mshta.exe" "$Destination_Folder\SqlAnchor.hta"

The shortcut for the launch script is
powershell.exe -WindowStyle "Hidden" -File "\\filesrv42.sqladmin.lan\DBA\SqlAnchor\SqlAnchor.Launch.ps1" -ExecutionPolicy "Bypass"

When the shortcut is activated by the user, PowerShell is started and the launch script is loaded. This can be done from a file share as the PowerShell execution policy is bypassed.
Disclaimer: If you use this solution, it is your responsibility to be compliant.

The launch script copies the files for the HTA to a local folder. If the folder does not exist, it is created.
If the files are present in the local folder, they are replaced.

Finally the launch script starts the HTA host „mshta.exe“ and load the hta script.
When the hta script is loaded, the launch script finish with PowerShell.

HTA dynamic document II

The solution I sketched out 2008-10-07 I found out had one major fault - the entire DOM document was cleared, which made the solution a little too dynamic. For example also script tags was cleared...
Today I found an article about making a GUI using HTA: "Extreme Makeover: Wrap Your Scripts Up in a GUI Interface". This inspired me to play a little with the innerHTML attribute.

The script looks like this:
<?xml version=1.0" encoding=utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

<html>

<head>
 <title>Dynamic Document</title>
 <hta:application id="htaDynamicDocument" applicationname="DynamicDocument" />
 <style>
  h1, h2, p { font-family:sans-serif }
 </style>
</head>

<script type="text/jscript" language="jscript">
 function newContent() {
  var markup = "<p>Navigare necesse est!<p>"
  return markup;
 }

 function jsContent() {
  myArea.innerHTML = "<h2>jsContent</h2>" + newContent();
 }
</script>

<script type="text/vbscript" language="vbscript">
 Sub vbContent_onclick
  markup = "<p>Vivere non est necesse,</p>"
  myArea.innerHTML = "<h2>vbContent</h2>" + markup + newContent()
 End Sub
</script>

<body>
 <h1>Dynamic Document</h1>

 <input type="button" value="JScript content" onclick="jsContent()">
 &emsp;
 <input type="button" value="VBScript content" name="vbContent">

 <span id="myArea"></span>

 <p style="font-size:smaller">&copy; 2008, Niels Grove-Rasmussen &mdash; SQLAdmin.dk</p>
</body>

</html>

An execution of the script starts like this:

Clicking "JScript content" alter the document to this:

Clicking "VBScript content" alter the document to this:

If "JScript content" is clicked again, the document looks like the second image.

The trick is in two parts:

1. The span-section with the identifier "myArea".
2. Adding a string to the innerHTML attribute of the span-section.

The style section in the head and the JScript function newContent() are made to show that shared elements does have effect in the contents of the innerHTML attribute.

Executing a remote HTA file

By default it is not possible to execute a HTML Application (HTA) file placed remote like in a fileserver share.
When a colleague has created a silver bullet HTA file it is tempting to copy the file to a local disk. But then I miss when great new stuff is added :-(

This can be solved by two extra files: A Windows Shell (cmd) file placed together with the HTA file and a local shortcut for the cmd file.

The cmd file only needs three lines:
COPY /Y \\SANDBOX\SQLAdmin\SilverBullet.hta %TEMP%\SilverBullet.hta

START /WAIT mshta.exe %TEMP%\SilverBullet.hta

DEL %TEMP%\SilverBullet.hta

<2008-10-27>Dennis is absolutely right about the DEL statement, which is now corrected.</2008-10-27>

The usage of the environmental variable %TEMP% makes the cmd file usefull also for users that are not local administrator on the workstation.

The shortcut can also be placed together with the HTA file, so changes from default settings can be shared. For example the execution can be set to a minimized window so that the cmd.exe window does not show on the users desktop.

HTA dynamic document

From time to time I still use HTA (HTML Application) to create a quick (and dirty) user interface for minor automation tasks. This is a quick example on how a dynamic document can be created and used.

The start document looks like this:

After clicking "New Document" the document looks like this:

The code is written in JScript and looks like this:

<?xml version=1.0" encoding=utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
 <title>Dynamic Document</title>
 <hta:application id="htaDynamicDocument" applicationname="DynamicDocument">
 <script type="text/javascript" language="javascript">
function writeNewDoc() {
 writeHeader();
 document.writeln("<p>This is a new document.</p>");
 writeFooter();
}
function writeHeader() {
 document.clear();
 document.writeln("<h1>Dynamic Document</h1>");
}
function writeFooter() {
 document.writeln("<p>© 2008, Niels Grove-Rasmussen</p>");
}
function startDocument() {
 writeHeader();
 var MarkUp = "<p>";
 MarkUp += '<input type="button" value="New Document" ';
 MarkUp += 'onclick="writeNewDoc();" ';
 MarkUp += 'title = "Open new document." />';
 MarkUp += "</p>";
 document.writeln(MarkUp);
 writeFooter();
}
 </script>
</head>

<body>
 <script type="text/jscript" language="jscript">
  startDocument();
 </script>
</body>
</html>

HTA is described by Microsoft at HTA Developers Center.