i4SCADA Knowledge Base

Modal dialogs

Abstract

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.

Modal_dialog_at_runtime.jpg

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_button_extensions.jpg

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 modal dialog title.