WinCC Engineering V18 - WinCC Unified - Configure Faceplate As Pop-Up

WinCC Engineering V18 - WinCC Unified
Configure faceplate as pop-up
Introduction
A faceplate can be opened in Runtime as pop-up window by means of a script.
Note
Only faceplate versions used in the HMI device are available in Runtime.
• Use the faceplate version in the HMI device as faceplate container or in a script as reference.
The reference is not resolved if you dynamically generate the name of the faceplate version to be
opened as a popup with a script.
• If there is no faceplate version with the name, an empty container is opened.
You have the option of calling a pop-up window either inside or outside a faceplate type:
• Outside a faceplate type: You transfer all interface tags and interface properties in the script.
• Inside a faceplate type: The interface tags and interface properties of the pop-up are applied from
the faceplate type in which the pop-up window is triggered.
Tip for an efficient procedure
The "OpenFaceplateInPopup" and "Close" methods are available as a snippet. The available snippets are
displayed in the shortcut menu of the "Scripts" editor.
Requirement
• A screen is open.
Open and close pop-up windows outside a faceplate type

To configure a faceplate as a pop-up window, for example, to an event of a screen object, follow
these steps:
1. Create a faceplate type.
2. Create faceplate tags, for example, "Interface_Tag_1".
3. Create interface properties, for example, "Color_Property_1" (color data type) and
"ResourceList_Property_1" (resource list data type).
This document constitutes a free excerpt compiled by the user himself/herself from the documentation provided by Siemens for this product. Siemens disclaims all
liability for the completeness of this document. It shall only be used for the user's own internal purposes. It shall not be passed on to third parties.
11/30/2023
Note
Interface property of the "Multilingual text" data type
Interface properties of the "Multilingual text" data type cannot be passed to a faceplate that
is called as a popup window outside of a faceplate type.
4. Configure the visualization of the faceplate.

5. Interconnect the tags and properties.
6. Release the version of the faceplate type.
7. Open the screen of the HMI device.
8. Configure the screen object that is to trigger the event, for example, a button.
9. Open the Inspector window under "Properties > Events".
10. Select an event.
11. Click on
"Convert function to script".

A function is generated.
12. Assign tags and interface properties to the faceplate interface. In the example, the "data" parameter
is used.
To specify text lists, use the prefix "@Default", for example, "@Default.Text_list_1".
Note
Graphic lists are not supported.
13. Create a global definition for the faceplate pop-up.

Example:
//JEx: "Faceplate in Popup"
var po;
14. Use the "OpenFaceplateInPopup" method.
― Define the type of the pop-up window, for example, "Faceplate_1".
Note
The version of the faceplate type preset as "Default" is automatically displayed in

Runtime.
11/30/2023
Note
Note that you must replace spaces and dots in the faceplate name with underscores
when referencing faceplate versions.
Reference faceplate versions with full version numbers, such as:
Faceplate_1_V_0_0_3.
― Define the title of the pop-up window, for example, "Popup".

― Specify the parameter of the interface, for example, "data".
― Optional: The pop-up window is closed automatically when the specified screen is exited.
Default: 0. The pop-up window remains open until it is closed manually or Runtime is terminated.
In the example, the pop-up window is closed as soon as the active screen is exited.
― Optional: Specify whether the pop-up window is hidden.

Default: false. The pop-up window is visible.
15. If required, specify where the pop-up window is opened.
16. Configure a "Close pop-up" button.
17. Open the Inspector window of the button under "Properties > Events".
19. Click on

20. Use the "Close" method.
11/30/2023
Example code for calling the faceplate pop-up outside a faceplate type
//JEx: "Faceplate in Popup"
//TagsRequired: "HMI_Tag_1"
//FPlateRequired: "Faceplate_1", "Interface_Tag_1", "Color_Property_1", "ResourceList_Property_1"
export function Button_1_OnTapped(item, x, y, modifiers, trigger) {
let data = {Interface_Tag_1:

{Tag:"HMI_Tag_1"},Color_Property_1:0xff00ff00,ResourceList_Property_1:"@Default.Text_list_1"};
po = UI.OpenFaceplateInPopup("Faceplate01_V_0_0_3", "Popup", data, UI.ActiveScreen, false);
po.Left = 100;
po.Top = 150;
Example code for closing the faceplate pop-up outside a faceplate type
//JEx: "Close Faceplate in Popup"
//FPlateRequired: "Faceplate01_V_0_0_3", "po"
if (po)
po.Close();
po = undefined;
11/30/2023
Calling a pop-up window within a faceplate type

To configure a faceplate as a pop-up window, for example, to an event of a screen object within
a different faceplate type, follow these steps:
1. Create a faceplate type, for example, "Faceplate_1".
The event that opens the pop-up window is configured in this faceplate type.
2. Create another faceplate type, for example, "Popup_1".
This faceplate type is opened as a pop-up window.
3. Create the same interface tags in both faceplate types, for example, "Interface_Tag_1".
4. Create the same interface properties in both faceplate types, for example, "Color_Property_1" and
"ResourceList_Property_1" (resource list data type).
Note
The name and data type of the interface tags and interface properties must match. The
order may be changed. Missing interface tags or interface properties are not transferred.
5. Configure a screen object that is to open the pop-up window, e.g. a button, in the "Visualization" tab
of "Faceplate_1".
6. Configure additional objects to visualize the two faceplate types.
7. Interconnect the tags and properties of both faceplate types.
8. Select the screen object which is to open the pop-up window.
9. Open the Inspector window under "Properties > Events".
11. Click on

12. Use the "OpenFaceplateInPopup" method.
― Define the type of the popup window with the desired version, for example,
"Popup_1_V_0_0_1".
The correctly detected reference to the faceplate type is highlighted in green.
― Define the title of the pop-up window, for example, "Popup".

― Optional: The pop-up window is closed automatically when the specified screen is exited.
Default: independentWindow = false.
The pop-up window is closed when the faceplate or the screen is exited.
In the example, the pop-up window remains open until the pop-up window is closed manually
or Runtime is exited.
― Optional: Specify whether the pop-up window is hidden.

Default: invisible = false.
11/30/2023
The pop-up window is visible.

13. If required, specify where the pop-up window is opened.
po.Left = 100;
po.Top = 150;
14. Switch to the faceplate type "Popup_1".
15. Configure a "Close pop-up" button.
16. Open the Inspector window of the button under "Properties > Events".
18. Select the "Convert function to script" button.
19. Use the "Close" method.
20. Release both type versions.
Example code for calling the faceplate pop-up within a faceplate type
//JEx: "Faceplate in Popup within another Faceplate"
//FPlateRequired: "Popup_1"
po = Faceplate.OpenFaceplateInPopup("Popup_1_V_0_0_1", "Popup", true, false);
po.Left = 100;
po.Top = 150;
11/30/2023
Example code for closing the faceplate pop-up within a faceplate type
//JEx: " Close Faceplate in Popup within another Faceplate"
//FPlateRequired: "Popup_1_V_0_0_1"
Faceplate.Close();
Result
When the configured event is triggered in Runtime, the pop-up window opens or closes.
11/30/2023

WinCC Engineering V18 - WinCC Unified - Configure Faceplate As Pop-Up

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WinCC Engineering V18 - WinCC Unified - Configure Faceplate As Pop-Up

Uploaded by

Copyright:

Available Formats

WinCC Engineering V18 - WinCC Unified

Configure faceplate as pop-up

Configure faceplate as pop-up

• If there is no faceplate version with the name, an empty container is opened.

Tip for an efficient procedure

Open and close pop-up windows outside a faceplate type

4. Configure the visualization of the faceplate.

"Convert function to script".

Graphic lists are not supported.

13. Create a global definition for the faceplate pop-up.

― Define the type of the pop-up window, for example, "Faceplate_1".

The version of the faceplate type preset as "Default" is automatically displayed in

― Define the title of the pop-up window, for example, "Popup".

― Optional: Specify whether the pop-up window is hidden.

"Convert function to script".

//JEx: "Faceplate in Popup"

//FPlateRequired: "Faceplate_1", "Interface_Tag_1", "Color_Property_1", "ResourceList_Property_1"

export function Button_1_OnTapped(item, x, y, modifiers, trigger) {

let data = {Interface_Tag_1:

po = UI.OpenFaceplateInPopup("Faceplate01_V_0_0_3", "Popup", data, UI.ActiveScreen, false);

//JEx: "Close Faceplate in Popup"

//FPlateRequired: "Faceplate01_V_0_0_3", "po"

export function Button_2_OnTapped(item, x, y, modifiers, trigger) {

Calling a pop-up window within a faceplate type

"Convert function to script".

― Define the title of the pop-up window, for example, "Popup".

― Optional: Specify whether the pop-up window is hidden.

The pop-up window is visible.

//JEx: "Faceplate in Popup within another Faceplate"

export function Button_1_OnTapped(item, x, y, modifiers, trigger) {

po = Faceplate.OpenFaceplateInPopup("Popup_1_V_0_0_1", "Popup", true, false);

//JEx: " Close Faceplate in Popup within another Faceplate"

export function Button_2_OnTapped(item, x, y, modifiers, trigger) {

You might also like