The IFrame (inline frame) is an element used to include external HTML documents and Web applications within Genie. When an IFrame is present on a Genie page, that page will load another Web page within the IFrame component.
Creating a New IFrame
A new IFrame can be created by selecting the IFrame option under Containers in Widgets and dragging it to the screen.
Setting the URL property
Next, set the “iframe url” property of the IFrame to load any external web page or application into the existing screen.
For example, type in http://www.google.com as shown in the figure below.
Additionally, you can control whether the IFrame should have a border. In this example, we want to make it explicit that this is an external page. Thus, we set the frame border property to true (circled in green). Save your changes and exit the designer to see the changes.
You have now embedded Google’s homepage into your existing screen. You are ready to search the web without leaving your current screen.
Passing Parameters to a URL – UPS Tracking Example
Here is an example of a product maintenance application that passes a tracking number to the United Parcel Service of America (UPS) web site. In this example, we are loading the UPS website into an IFrame on a product maintenance screen in Genie. We are also passing a tracking number from our product maintenance application to the UPS website to track the shipment.
Let’s explore what it takes to grab data from the screen and pass it to a website such as ups.com. First, make sure Design Mode is On.
Select the IFrame on the screen and in the iframe url property, type in the following:
js: "http://www.ups.com/tracking/tracking.html?trackNums=" + get("I_6_20")
The get() api will retrieve the value from an element on the screen in real time. If the element is a textbox, the api will return the value entered in the textbox. If the element is an output field, it will return the value (or text) inside the output field. More information about the get() api could be found under here.
To see the IFrame in action, right-click on the screen to get the main context menu and then select Save and Exit Design.
IFrame Vs. Ajax Container
There are a number of differences between an IFrame and an Ajax Container. Below is a list of the key differences:
(1) The IFrame component is an element that embeds entire web pages or web applications into other HTML content. The Ajax Container is designed to bring dynamic data or a subset of HTML content into the screen, rather than full applications or web sites.
(3) The IFrame component works across domains, while the Ajax Container is, by default, limited to the current domain.
For more information about Ajax Containers, click here.