Genie Textbox

Textboxes are the most commonly used input fields. All green-screen input fields will be automatically converted to textboxes. A textbox is a basic form element that allows the user to input text.

Auto-Complete

A very useful option that can be applied to a textbox is Auto-Complete. This is where a list of valid options is displayed below the textbox. This list is updated with each key the user types. The user can then select one of the listed options which will be placed within the textbox.

With the use of auto-complete, comes another useful feature: the ability to utilize different choices and choice values. For example, if the original input field (textbox) requires a user to enter a category number, an auto-complete textbox may allow a user to enter a category description instead of the number. The description (choice) is displayed on the Genie screen but the number (value) is passed to the underlying application.

There are three ways of providing a list of choices for auto-complete.

Auto-Complete Choices

These choices are a fixed list entered directly into the properties dialog. They are entered as a comma separated list. An edit dialog box provides an easy interface to add or update the list. This edit dialog box appears if the button illustrated below is clicked.

If you do not require different choices and values, simply leave the choice values list empty.

Database Driven Auto-Complete

This option allows the correct choices to be retrieved from a Database file. Simply enter the name of the database file, the name of the choice option field, and the name of the choice value field. The selection criteria can be used to filter the choices similar to an SQL WHERE clause. Max choices will limit the number of choices returned.

Genie will use the library list of the underlying application’s job to search for the database file. There is no need to qualify the file name with the library name, although you can if required.

Once the file name has been entered, the "..." button in the choice options and choice value fields will open the dialog box shown below. This dialog lists all the fields in the specified file allowing easy selection of the correct field names.

Dynamic Auto-Complete

Dynamic Auto-Complete is typically used if the selection criteria are too complex for the database driven auto-complete.

In this case, a URL is supplied in the properties box. Genie will post a field called query to the URL (typically a CGI program written in RPG, PHP, or Java) and the program must return the options in the correct format as shown in the example below. In this example, five results are being returned.

{success:true,
 response:{
  "colWidths":[30,7],
  "results":[
    {"CNAME":"CLIMBING ACCESSORIES",          "CATID":"81"},
    {"CNAME":"CLIMBING HARDWARE",             "CATID":"77"},
    {"CNAME":"CLIMBING PITONS",               "CATID":"76"},
    {"CNAME":"CLOTHING",                      "CATID":"20"},
    {"CNAME":"CLIMBING",                      "CATID":"2"}
            ]
          }
}

The colWidths numbers define the maximum length of CNAME and CATID respectively.

Genie will using AJAX to retrieve the data from the CGI program which can be written in any CGI language. Under normal circumstances, AJAX cannot be used to call CGI programs on another domain; however, if calling a program on another domain is required, this can be implemented by creating a ProxyPass configuration in Profound UI.

Onblur events

A very useful property for a text-box is the onblur event. This will run when the user clicks out of on the textbox, or when the textbox loses focus. It can be used to run any Genie or JavaScript commands.

The example below will press the Enter Key when focus is lost on the textbox.

Perhaps a more useful example would be to call a custom function to ensure that the data in the textbox is valid. If the data is invalid, an alert box can be displayed and the cursor can be placed back in the textbox. This would force the user the supply valid data before proceeding. The example below calls a JavaScript function to check if the information entered is a valid date.

Overtype Mode

To be consistent with green-screen behavior, by default, a textbox in Genie operates in overtype mode (however, this feature is only supported in IE). For example, if you place the cursor at the beginning of a textbox that contains a value, any new text will overwrite the existing text.

Genie can be configured so that all textboxes operate in insert mode at all times.

Overtype mode can be turned off in the Genie Administrator. This selection can be chosen to apply globally (all skins) or just to one skin.