Dialog Boxes

There are two ways to create dialog boxes in web applications. You can use the simple MessageBox command to display a simple dialog box or you can create a full-featured dialog box by creating a WebDialog.

MessageBox

MessageBox can only be used to display a simple text message with a single button.

MessageBox("File transfer complete!")

This line of code displays a message box with the message and one button that the user can click to dismiss the dialog.

The MessageBox command does not cause your code to wait until the MessageBox is closed. Your code continues running to the end of the method.

Web dialog

Most of the time you will need a more advanced dialog box, perhaps with additional controls, or a more sophisticated layout than what MessageBox offers. To do this, you add a Web Dialog to your project, layout its design and add it to a web page. On the dialog, you add the controls for the layout you need. In particular, remember to add a button that dismisses the dialog by calling the Close method.

Your code does not pause and wait for the dialog to be closed. Instead the code in your method (or event) continues to the end. The Dismissed event (shown below) is called when the dialog is closed.

Below is a list of commonly used events, properties and methods. Refer to WebDialog for the complete list.

Events

Dismissed - The Dismissed event is called when the dialog closes by calling its Hide or Show methods. It is also called when the close button on the title bar is clicked for palette dialogs.

Methods

Close - Call the Close method in a web dialog dismisses the dialog and calls its Dismissed event handler.

Show - Displays the web dialog. Remember, web dialogs do not cause your code to wait until the dialog is closed.

Usage

Here is how you can add a dialog to a web page: 1. Create a new Web Dialog called “TestDialog” using the Insert button on the toolbar or the Insert menu. Or you can drag a “Modal Dialog” from the Library.

Add two buttons to TestDialog. Name the buttons “OKButton” and “CancelButton” and change their captions to “OK” and “Cancel” respectively.
Add a public property called SelectedButton As WebButton.
In the Pressed event for each button, add this code:

SelectedButton = Me
Self.Close

Now you can add the dialog to the web page. Drag the dialog from the Navigator to the default web page. The dialog appears in the shelf at the bottom of the Layout Editor and it is called TestDialog1.
Double-click on TestDialog1 to add an event handler. Choose the Dismissed event from the list and click OK.
In the code editor add this code:

Select Case Me.SelectedButton
  Case Me.OKButton
    MessageBox("OK pressed.")
  Case Me.CancelButton
    MessageBox("Cancel pressed.")
End Select

Add a Button to the web page and name it “DialogButton” with a caption of “Test”.
Double-click DialogButton and add the Pressed event handler. Add this code:

TestDialog1.Show

What you have created is a simple dialog that gets displayed when you click the Test button on the web page. When you click either OK or Cancel on the dialog, the SelectedButton property gets set to the button that was pressed (referred to by Me) and the dialog is closed. This calls the Dismissed event handler, where your code checks the SelectedButton property of the dialog (that you just set) and displays a message telling you which button was clicked.