Skip to main content

Calling a Dialog in a Visualization

You can configure user input for a visualization to open a visualization as a dialog. For example, a user clicks a button which opens a dialog and prompts the input of values. A dialog is used to get user input and (if modal) it can block input outside of the dialog.

Only visualizations of Dialog visualization type can be opened as a dialog. You configure the visualization type in the Properties dialog of a visualization object.

Procedure. Main procedure

Requirement: A main visualization and a dialog exist in the project.

  1. Configure a user input for the main visualization with the OpenDialog action for the dialog.

    The dialog opening is configured.

  2. Configure a user input for an element of the dialog with the CloseDialog action.

    Hint: For non-modal dialogs, you can configure the user input for closing outside the dialog as well.

    The dialog closing is configured.

Tip

Instead of creating your own dialogs, you can use dialogs from libraries. For example, when the VisuDialogs library is integrated in the project, you can use the included dialogs VisuDialogs.Login or VisuDialogs.FileOpenSave.

Note

0_Sample_Project Sample project about handling with a dialog

Configuring a visualization object as a dialog

  1. In the Devices view, select the object, open the context menu, and click Properties.

  2. Click the Visualization tab.

  3. Select the Dialog option and click OK to close the dialog.

    The visualization has the Dialog visualization type and can be called as such.

Configuring a dialog call

For dialog calls, a user usually clicks a button that opens a dialog and prompts the input.

In the following example, a dialog is displayed as a calendar and allows for the input of a date.

Requirement: The project includes the visualizations visMain and dlgCalender.

  1. Set the visualization type from dlgCalender to dialog.

  2. Drag a rectangle to the visualization visMain.

  3. Configure the Texts → Text property with the text Due date: %t[yyyy-MM-dd].

    Configure the Text variables → Text variable property with PLC_PRG.dateDue.

  4. Drag a button to the visualization.

  5. Configure the Texts → Text property with the text Open dialog.

    Configure the Input configuration → OnMouseClick property for the Open dialog action with dlgCalender.

    The user input for opening the dialog is configured.

  6. Double-click the dlgCalender dialog.

  7. Drag a Date Picker element to the visualization editor.

  8. Configure the Texts → Text property with Due date: %t[yyyy-MM-dd].

    Configure the Variable property with PLC_PRG.dateCalender.

    The element is configured.

  9. Drag a button to the visualization editor.

  10. Configure the Texts → Text property with OK.

  11. Configure the Input configuration → OnMouseClick property for the Close dialog action with dlgCalender, Result: OK.

  12. Configure another Input configuration → OnMouseClick property for the Execute ST code action with PLC_PRG.dateDue := PLC_PRG.dateCalendar;.

    The user input for closing the dialog is configured.

  13. Drag another button to the visualization editor.

  14. Configure the Texts → Text property with Cancel.

  15. Configure the Input configuration → OnMouseClick property for the Close dialog action with dlgCalender, Result: Cancel.

    The user input for canceling the dialog is configured.

  16. Compile, download, and start the application.

    _visu_img_dlg_calendar.png

Variable declaration

PROGRAM PLC_PRG
VAR
    dateDue : DATE := DATE#2000-01-01;
    dateCalendar : DATE;
END_VAR

Implementing application access to dialog

You can open a dialog by means of application code or from the application. For easy access, use the interface from the VisuUtils library. When you open VisuUtils in the Library Manager, you can scan the library by its contents and access the library documentation.

You can open and close dialogs by means of the function blocks FbOpenDialog, FbOpenDialogExtended, and FbCloseDialog from the library VisuUtils. If a dialog is opened or closed globally, then the parameter itfClientFilter := VU.Globals.AllClients has to be set when the function block is called. Then the dialog appears or disappears simultaneously on all display variants that are configured below the Visualization Manager.

Tip

In CODESYS V3.5 SP10 and lower, you could implement programmatic access to dialogs only by means of the functionality of the internal dialog manager. In V3.5 SP11 and higher, you have the VisuUtils library.

Note

0_Sample_ProjectSample project with visualized dialogs in ST

In this example project, dialogs are accessed programmatically via the interfaces from the “Visu Utils” library. There, you can see how opening a dialog or passing parameters to a dialog is implemented

: