From Xojo Documentation
Supported PlatformsProject Types: Web Platforms: macOS, Windows, Linux
A WebDialog is a small dialog window that displays as a sheet, palette or modal dialog within a web page.
WebDialogs can only contain controls that are subclasses of WebControl.
To display a dialog on your page, drag it to the Web Page Layout Editor or instantiate one in code. You can then display it by calling the Show method:
In the dialog itself, you should have a way to close it, usually with a button with code like this:
When the dialog is closed, the Dismissed event handler (for the dialog on the web page) is called. There you can perform your actions.
Keep in mind that dialogs are not modal and do not stop your code from running. After calling MyDialog.Show, the next line of code will run. Use the Dismissed event handler to process the results from the dialog.
Dialogs can remain in view, even as a page is hidden from view. However, once a page is closed (rather than hidden) any dialogs attached to it are also removed.
For simple dialogs, you can instead use the MessageBox method.
Differences Between Dialogs in Web and Desktop Applications
There are two important differences between dialogs in web applications versus desktop applications. The first is that web dialogs are a specific type project item whereas in a desktop application project they are simply a window with the Frame property set to a particular value. The other more important difference is that unlike in a desktop project, dialogs in a web application are asynchronous.
After creating a WebDialog by clicking Add Dialog in the Project Editor’s command bar, you must add the dialog to any web page in front of which, you wish to show the dialog. All dialogs you add to your project will show up in the Controls pane of the WebPage Editor as they are treated, for the most part, like any other control on a webpage. To add the dialog to your page, drag it from the Controls pane to the WebPage. It will appear in the list of controller objects list at the bottom of the editor. You can then double-click the dialog to add code to its events.
Dynamically Displaying a Dialog
At times, you may need to display a different dialog at run-time. For example, you may want to use a different dialog to display when the user is on a mobile device.
This example dynamically displays a dialog, MyDialog, which has a single button with this code in its Action event handler:
On a button on the web page, you can display the dialog like this:
DismissedHandler is a method on the web page declared like this:
|Dynamically created Dialogs that are closed by calling Close cannot be shown again until you create a new instance.|
Consider a dialog, MyDialog, which has a single button with this code in its Action event handler:
With this dialog dragged onto a web page, you can display it using this code (probably on the Action event handler of a button):
When the dialog is closed, the Dismissed event handler is called. This code displays a simple message to indicate it was closed:
Additional examples are in the WebDialog.Dismissed page.