Opening URL links in Web Applications

You can open URL links from TGML graphics.

While you can add a URL link to any TGML component, in this example a button component is created and then linked to a URL. When the button is clicked in Web Applications, the URL displays.

To open URL links in Web Applications:

1. Open the Graphics Editor from this location C:\Users\Public\Desktop\Power Operation by clicking on the Graphics Editor Icon.
   
   

   The following screen is displayed:
   
   
   

2. In the bottom left corner, click Components:
   
   

3. Click Basic Controls:
   
   

4. Drag and drop a Button component to the workspace:
   
   

5. Click Snippets:
   
   

   The following screen is displayed:
   
   

6. Drag and drop Link onto the Button component in the workspace.
   
   

7. In the bottom right corner, click Objects:
   
   

   The following screen is displayed:
   
   

8. Set the Link attribute value:

   1. Expand the Use plus box to find the Link attribute within the button:
      
      
   2. Log in to PO Web Applications (https://localhost/webhmi or https://ipaddress/webhmi).

   For example, click on controlop in Diagram Library menu, and then copy the highlighted URL:
   
   

   3. Go back to Graphics Editor TGML page, double-click on Link > Object, and then paste the copied URL:
      
      
      

9. Click Save to save the TGML file. For example: URL
   
   

 

Test the changes:

1. Log in to PO Web Applications (https://localhost/webhmi or https://ipaddress/webhmi).

For example, click on controlop in Diagram Library menu, and then copy the highlighted URL.



2. Go back to Graphics Editor TGML page, double-click on Link > Object, and then paste the copied URL.
   
   

3. Click Save to save the TGML file. For example: URL
   
   

4. Go back to PO Web Applications page which was already open, and then refresh the page.
   

   URL saved graphic file name is displayed in the Diagram Library menu.
   
   

5. In the Diagram Library menu, click URL:
   
   

   The following screen is displayed:
   
   

6. Click the Button:
   
   

   The following output screen is displayed with the linked URL of controlop in new tab.