Creating A Custom Dialog Using The Internet Explorer Object

Note: This tip is for use with SecureCRT® for Windows®

A common need in scripting is the ability to create GUI interfaces for user interaction, like gathering username and password data, or displaying script output. While VBScript's MsgBox and InputBox let you script certain simple interactions, you can create more sophisticated dialogs using HTML code with the Internet Explorer (IE) object. This tip walks you through building the dialog, displaying it, and handling events in the dialog with full code samples.

Creating a custom dialog for use with SecureCRT scripts involves the following steps:

1. Building the GUI
2. Displaying the GUI
3. Handling UI Events

Building the GUI

Here is a screenshot of the custom dialog we will create:

The GUI interface for our custom dialog will be built using HTML code displayed through Internet Explorer. There are two ways to store the HTML code.

• Creating an HTML file with the HTML code, or
• Dynamically specifying the HTML code within script code

Our example will use the second method of dynamically specifying the HTML code within the script code. Below is an example of what this code might look like in the SecureCRT script for a dialog that displays fields for entering username and password, and contains OK and Cancel buttons:

szHTMLBody = _
    "<font color='red'><b>Specify username and password:</b></font>" & _
    "<hr>" & _
    "<b><u>U</u>sername:</b>" & _
    "<input name='Username' size='40' maxlength='512' AccessKey='u'>" & _
    "<br>" & _
    "<b><u>P</u>assword:</b>" & _
    "<input type=password name='Password' size='40' maxlength='512' AccessKey='p'>" & _
    "<hr>" & _
    "<button name='OK' AccessKey='O'><u>O</u>K</button>" & _
    "&nbsp;&nbsp;&nbsp;&nbsp;" & _
    "<button name='Cancel' AccessKey='C'><u>C</u>ancel</button>"

Displaying the GUI

Displaying the GUI is accomplished by performing the following tasks:

1. Get a reference to the InternetExplorer.Application object
2. Inject the HTML GUI code associated with the controls in our custom dialog
3. Configure display properties of the IE window, and bring the window into view

Here is example code that performs these three steps:

' Get a reference to IE's Application object
Set g_objIE = CreateObject("InternetExplorer.Application")
g_objIE.Offline = True
g_objIE.navigate "about:blank"

' This loop is required to allow the IE object to finish loading...
Do
    crt.Sleep 100
Loop While g_objIE.Busy

g_objIE.Document.body.Style.FontFamily = "Sans-Serif"

szHTMLBody = _
    "<font color='red'><b>Specify username and password:</b></font>" & _
    "<hr>" & _
    "<b><u>U</u>sername:</b>" & _
    "<input name='Username' size='40' maxlength='512' AccessKey='u'>" & _
    "<br>" & _
    "<b><u>P</u>assword:</b>" & _
    "<input type=password name='Password' size='40' maxlength='512' AccessKey='p'>" & _
    "<hr>" & _
    "<button name='OK' AccessKey='O'><u>O</u>K</button>" & _
    "&nbsp;&nbsp;&nbsp;&nbsp;" & _
    "<button name='Cancel' AccessKey='C'><u>C</u>ancel</button>"

' Inject the HTML code above into the IE object
g_objIE.Document.Body.innerHTML = szHTMLBody

' Prevent the MenuBar, StatusBar, AddressBar, and Toolbar from
' being displayed as part of the IE window
g_objIE.MenuBar = False
g_objIE.StatusBar = False
g_objIE.AddressBar = False
g_objIE.Toolbar = False

' Set the initial size of the IE window
g_objIE.height = 200
g_objIE.width = 425

' Set the title of the IE window
g_objIE.document.Title = "Authentication Credentials Prompt"
g_objIE.Visible = True

' This loop is required to allow the IE window to fully display
' before moving on
Do
    crt.Sleep 100
Loop While g_objIE.Busy

' This code brings the IE window to the foreground.
Set objShell = CreateObject("WScript.Shell")
objShell.AppActivate g_objIE.document.Title

' Once the dialog is displayed and has been brought to the
' foreground, set focus on the control of our choice...
g_objIE.Document.All("Username").Focus

Handling UI Events

There are four main components of an event handler for our custom dialog using IE:

• A hidden variable in the HTML code (ButtonHandler in our example below)
• Setting up OnClick actions for each button in the dialog that sets the ButtonHandler value to reflect the name of the button that was pressed
• A Do loop that waits for any change in the ButtonHandler variable
• A Select Case code block that handles each button press event

The Hidden ButtonHandler Variable

This variable is included in the HTML code and is updated every time something important happens, such as the user clicking OK or Cancel. The following HTML code for the OK and Cancel buttons sets the value of our hidden ButtonHandler variable appropriately:

<button name='OK' AccessKey='O' Onclick=document.all('ButtonHandler').value='OK';><u>O</u>K </button>

and

<button name='Cancel' AccessKey='c' Onclick=document.all('ButtonHandler').value='Cancel';><u>C</u>ancel</button>

The following code creates the ButtonHandler variable and sets its initial value to "Nothing Clicked Yet" as an explicit indication that no buttons have been pressed yet:

<input name='ButtonHandler' type='hidden' value='Nothing Clicked Yet'>

The Do Loop

The Do loop is used in the SecureCRT script to continue looping while checking the value of the ButtonHandler variable. In the event that the IE window is closed by means other than the Cancel button, this will be handled as well.

The Select Case

The Select Case, contained in the Do loop, is used to act on the different inputs received from the user inside custom dialog. Since the Do loop does not include a While statement that would inherently exit the loop should a certain clause be met, code to exit the loop will need to be included in the Select Case.

An example of the complete Do loop with the embedded Select Case is below:

Do
    ' If the user closes the IE window by Alt+F4 or clicking on the 'X'
    ' button, we'll detect that here, and exit the script if necessary.
    On Error Resume Next
        Err.Clear
        szNothing = g_objIE.Document.All("ButtonHandler").Value
        if Err.Number <> 0 then exit do
    On Error Goto 0

    ' Check to see which buttons have been clicked, and address each one
    ' as it's clicked.
    Select Case g_objIE.Document.All("ButtonHandler").Value
        Case "Cancel"
            ' The user clicked Cancel. Exit the loop
            g_objIE.quit
            Exit Do
        Case "OK"
            ' The user clicked OK. Act on the information in the
            ' Username and Password fields
            ' Capture data from each field in the dialog...
            szUsername = g_objIE.Document.All("Username").Value
            szPassword = g_objIE.Document.All("Password").Value
            g_objIE.quit
            ' Now that we have closed the IE dialog, we can act on our data
            MsgBox "Here is the information you entered..." & vbcrlf & vbtab & _
                "Username: " & szUsername & vbcrlf & vbtab & _
                "Password: " & szPassword
            Exit Do
    End Select

    ' Wait for user interaction with the dialog...
    crt.Sleep 200
Loop

The Final Product

The complete SecureCRT script for the custom dialog can be downloaded here.

If you have any questions about using the IE object to create custom dialogs, or other scripting questions, contact VanDyke Software Support.