URL in Same Window

When you click a TGML graphic that has a configured URL In Same Window snippet, another site or web application page opens in the same window.

This topic uses an example to illustrate how to configure a URL In Same Window snippet.

Prerequisites:

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

To configure the URL In Same Window snippet: 

1. In the Snippets pane, click URL In Same Window from the list of snippets.



2. Drag and drop the URL In Same Window snippet over the selected component in the workspace.
3. In the bottom right corner, in the Objects pane, expand TGML > Component node.

Two additional properties appear: Link and Script.

4. Update the link with the URL to be opened in the same window.
   
   
5. Click Script.
   
   
6. In the bottom right corner, click Properties, and then expand Behavior.
7. Click the ellipsis next to OnMouseClick.
   
   
8. Use the following script to configure the URL in the same window snippet:
   
   Copy

   function click(evt)

   function click(evt)
   {
   //Collecting the links from the Component
   var Link = evt.getCurrentTarget().getElementsByTagName("Link");
   
   //if You Want to open the given  Url in same window or not ,here same window is Yes meaning it will open the Url in same window
   var sameWindow = "Yes";
   
       for (var i=0;i< Link.length;i++) {
       
       //LinkFileName : Extracting the file name from the Link
       var LinkFileName = Link.item(i).getAttribute("Name");
       
       //With invoke function you can configure the graphic component in 
       //Graphics Editor to open a linked target object in a target location 
       //when you perform a action(URL In Same Window) on the component
       invoke(LinkFileName, "Type = Href | HrefSameWindow = "+sameWindow);
       }
   }
   
   function load(evt)
   {
   }

    

9. Go to File > Save As > Project TGML.
   
   
10. Enter a file name, and then click Save.

 

To view the snippet behavior:

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

   The Power Operation Web Applications Home page appears.
   
   

2. Select the new TGML file from the left panel Diagram Library:
   
   

3. Click the breaker to open the URL in the same window: