Modal dialogs
Create an interactive i4scada SmartEditor project by adding Modal Dialogs, that can host components displayed as pop-ups at run-time.
The modal button extensions can host components and display them at run-time, as pop-ups.
The modal dialog at run-time
The modal dialogs are defined independently, at the project design phase and linked in the button. The extensions supporting or generating modal dialogs are:
wf-modal-button
wf-modal-dialog-button
wf-modal-dialog-button-basic
Modal Dialog Button extensions
The main scope of the modal dialogs is to reduce the amount of controls, on the main project page.
The most relevant Object Properties for the modal dialogs are the ones under the Dialog section:
Content Height - The height of the modal dialog content area.
Content Width - The width of the modal dialog content area.
Dialog CSS Class - Optional CSS class for additional styling of the modal dialog container.
Modal Dialog Source - The URL to the internal or external HTML document to be displayed in the modal dialog. Usually, the source document is a project page with the same width and height as the modal dialog content area.
Modal Dialog Placement - The vertical position of the modal dialog when opened. Can be Top, Center, or Bottom.
Parameters - Opens the Parameters dialog, allowing the user to define parameters and pass them to the modal dialog source document. The modal dialog source document does not need the wf-core extension to process parameters. A parameter is defined by its name and an associated value and can be accessed in the source document using its name.
Show Modal Dialog - If set to True, the modal dialog will be opened when clicking the extension at run-time, in the web browser.
Dialog Header Class - Sets the style of the Modal Dialog header.
Modal Dialog Title - The symbolic text displayed as a modal dialog title.