Genie Ajax Container

Owned by Former user (Deleted)
Last updated: Aug 16, 2023 by Jessica Tomkins

 

The AJAX container brings in content from other Web applications. It integrates with RPG/CGI, RPGsp, PHP, and other Web technologies. The content is typically dynamic and can accept information from the screen as parameters. You can place the container anywhere on the screen, size it in any way, and specify properties to control borders, backgrounds, vertical and horizontal scrolling, etc.

Creating a New Ajax Container

A new Ajax Container can be created by dragging it onto the screen from the Widgets Toolbox while in Design Mode.

Scrolling Properties

You can allow horizontal and vertical scrolling in an Ajax Container. To accomplish this, select the Ajax Container and from the Properties Dialog, find the properties: overflow x and overflow y

Overflow x: Determines whether a horizontal scrollbar is displayed for this element.

Overflow y: Determines whether a vertical scrollbar is displayed for this element.

Valid options for these properties include:

  • Visible: Lets the content flow beyond the dimensions of the element without a scrollbar.

  • Hidden: Does not display a scrollbar and hides overflowing content.

  • Scroll: Always displays the scrollbar.

  • Auto: Displays the scrollbar only when the element's content goes beyond the elements dimensions.

Note: auto is the default option.

Background Colors and Borders

You can define a background color for the Ajax Container or you may choose to add a background image. Furthermore, you can define border colors and border styles for each border of the Ajax Container.

To define a background color for the Ajax Container, find the “background color” property as shown below. Then select a color from the color palette.

The Ajax Container should look something like the screenshot below (depending on which color you pick):

To define border styles, select the Ajax Container and then from the Properties Dialog, find the border bottom style property as shown below. Select the dashed option from the select box as shown below.

Repeat the previous step for: border top style, border left style, border right style.

Here is the dash-bordered Ajax Container.

Passing Parameters to the URL

You can set the ajax url property to the dynamic program from which the data is going to be retrieved. Additionally, you can pass parameters to this url or program to retrieve a subset of data.

In this example, we are calling the getData.pgm program and passing a customer number to get information about a specific customer. The customer number is grabbed from the screen using the get() api and is passed as a parameter on the url.  The id of the screen’s customer number field must be provided to the get() api.

Make sure Design Mode is On. Select the Ajax Container and in the ajax url property, type in the url (full path) along with the parameter from the screen as shown below:

js: “/cgi/getData.pgm?custid=” + get(“I_5_6”);

The expression above will initiate an AJAX request to getData.pgm from which the response will be generated and sent back to the browser to be placed in the container. The prefix “js:” indicates that the url is a dynamic property built with a JavaScript expression.

After saving your work and exiting Design Mode, you should see the appropriate content included in the Ajax Container component on your screen.

Note: For the /cgi/ path to work, you must edit your HTTP configuration to allow CGI scripts through the /cgi/ alias.  Make sure the proper path (url) to the program is provided. If an incorrect url is provided, you will get a 404 – File Not Found HTTP error message in a pop-up dialog box. See below.

Ajax Container Vs. HTML Container

There are some differences between an Ajax Container and the HTML Container. Below is a list of the key differences:

(1)  The Ajax Container is designed to bring dynamic content or data to the screen via a url property. The HTML Container allows you to create your own custom elements using HTML code. The HTML code can be static or dynamic. Dynamic HTML can utilize values from other fields on the screen.

(2)  Because an Ajax Container can retrieve information or dynamic content through a url property, it is very flexible in terms of integration. It integrates with languages such as RPG, Java, and PHP. An HTML Container does not have a url property. Thus, it cannot integrate with any back-end technology or language since it is only meant to display front-end HTML content and controls.

For more information about HTML Containers, click here.

Note: By default, Ajax Containers do not work across multiple domains. This means that the ajax url property can only provide programs within the same domain where Genie is installed. However, with the use of ProxyPass Apache HTTP configuration directives, Ajax Containers can be enabled to access a specific set of other domains.