Genie IFrame

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")

Note: The keywords script and js allow you to concatenate strings and evaluate values using a JavaScript expression. In this case, the expression concatenates the ups tracking url with the evaluated value from the screen element with the ID {}I_6_20, which holds the tracking number for our shipment.

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.

(2) An IFrame cannot easily access information within other elements on the screen where the IFrame is placed. Although, some of the information on the screen can be passed to the IFrame as a parameter on the url, it cannot fully interact with the data and elements via scripting. An Ajax Container, however, has access to all of the screen data and elements that exist on the screen through the use of JavaScript.

(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.