PopUp snippet example

When you click 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. Click Snippets pane in the bottom left corner, and then click PopUp.
  2. Drag and drop the Popup snippet over the selected component in the workspace and save it.
  3. In the bottom right corner click Objects, and then expand the TGML node.
  4. 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.
    2. NOTE: You can configure only the Vista diagram and other TGML files in the Pop-up snippet.

    3. Click on the three dots and select Open in New Window.
    4. 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.

    5. Copy the new window browser URL.
    6. Paste the copied URL in the Link section.

  5. Click File > Save As > File.
  6. Enter a file name, and then click 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. Click on the breaker to open a pop-up displaying the web diagram.