PopUp snippet example

When you select a TGML graphic that has a configured PopUp snippet, a Vista diagram opens.

This topic uses an example to illustrate how to configure a PopUp snippet.

Prerequisites:

This example uses a graphic file that already has a binded component in the workspace. For more information on how to prepare the TGML graphic snippet examples, see TGML snippet examples prerequisites.

To create a PopUp snippet:

1. Select Snippets pane in the bottom left corner, and then select PopUp.



2. Drag and drop the PopUp snippet over the selected component in the workspace and save it.



3. In the bottom right corner select Objects, and then expand the TGML node.

Two additional properties appear: Link and Script

Set the Link value:

1. In PME Web Applications, go to the Vista diagram from PME web application that you want in the PopUp.

NOTE: You can configure only the Vista diagram and other TGML files in the Pop-up snippet.

2. Select on the three dots and select Open in New Window.

NOTE: To open the TGML file, enter the folder name and file name in the Link section, instead of the URL. For example: tgml\Test 1.

NOTE: If the tgml file is located in another folder inside the tgml folder you need mention all the folder names before the file name in the following format: tgml\<sub-folder name>\<file name>. For example: tgml\My TGML\Test1.

3. Copy the new window browser URL.

4. Paste the copied URL in the Link section.



4. Select File > Save As > File.



5. Enter a file name, and then select Save.

To view the snippet behavior:

1. In a browser, log in to PME Web Applications.



2. Select the new TGML file from the Diagram Library from the left hand panel as shown in the following image:



3. Select on the breaker to open a pop-up displaying the web diagram.