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, select Components:
   
   

3. Select Basic Controls:
   
   

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

5. Select Snippets:
   
   

   The following screen is displayed:
   
   

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

7. In the bottom right corner, select 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, select 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. Select 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, select 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. Select 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, select URL:
   
   

   The following screen is displayed:
   
   

6. Select the Button:
   
   

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