Calling a Dialog in a Visualization

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

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

Main procedure:

Requirement: A main visualization and a dialog are present 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.

    ⇒ Closing the dialog is configured.

Note

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.

See also

Configuring visualization objects as dialogs

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

  2. Click the Visualization tab.

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

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

Configuring dialog calls

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 property Texts ‣ Text with the text Due date: %t[yyyy-MM-dd].

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

  4. Drag a button to the visualization.

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

    Configure the property Input configuration ‣ OnMouseClick for the action Open dialog 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 property Texts ‣ Text with Due date: %t[yyyy-MM-dd].

    Configure the property Variable with PLC_PRG.dateCalender.

    ⇒ The element is configured.

  9. Drag a button to the visualization editor.

  10. Configure the property Texts ‣ Text with OK.

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

  12. Configure another property Input configuration ‣ OnMouseClick for the action Execute ST code 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 property Texts ‣ Text with Cancel.

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

  16. ⇒ The user input for canceling the dialog is configured.

  17. Compile, download, and start the application.

    ⇒

Variable declaration: 

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

In CODESYS Store, you will also find the sample Visualization dialog box that contains an application with dialog calls.

Opening dialogs globally

A dialog usually appears only on the display variant where a user executes the triggering event.

You can also configure the opening of the dialog in such a way that the dialog appears at the same time in all display variants that are configured below the visualization manager. In this way, for example, an input prompt can appear in all display variants at the same time, although a user specified something in the CODESYS TargetVisu only.

When a user closes the dialog on a CODESYS TargetVisu display variant, it is closed on all display variants.

With the OpenDialog3 and CloseDialog2 functions from the VisuElems library, you can open and close a global dialog.

Note

In CODESYS Store, you will find the sample project Visualization dialog box. The visualization allows the user to open a dialog and specify data. After closing the dialog, the data is stored and displayed in the main window.

Implementing application access to dialog

You can open a dialog by means of application code or from the application. For simple 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.

Note

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

In CODESYS Store, you will find the sample project Visu Dialog ST where dialogs are accessed programmatically by means of the interfaces from the VisuUtils library. From the project, you can see, for example, how to implement the opening a dialog or the passing of parameters to a dialog.

See also

3.5.16.0

© Copyright 2021, CODESYS GmbH