The following table shows how to create each of the specified HTML controls.
| HTML control | Field is array? | uiType | Field length | selectedIndex- |
Field value |
|---|---|---|---|---|---|
| Text box | N | input or inputOutput | <=80 chars | n/a | Initial display |
| Text area | N | input or inputOutput | > 80 chars | n/a | Initial display (between <textarea> and </textarea> tags) |
| Radio buttons | Y | input or inputOutput | n/a | Numeric field | Not used |
| Check boxes | Y | input or inputOutput | n/a | Numeric array | Not used |
| Single-selection combo box | Y | output | n/a | Numeric field | Entries in combo box |
| Multiple-selection combo box | Y | output | n/a | Numeric array | Entries in combo box |
10 ID INT [3] {
displayName = "First option: \nSecond option: \nThird option:" ,
selectedIndexItem = SELECTEDID,
uiType = input
} = [1, 2, 3];
10 SELECTEDID int {
uiType = none
};
The displayed control looks like the following example:

Note that each radio button label is followed by a text box that contains the value of the corresponding array member. These text boxes are an artifact of the VisualAge® Generator implementation; EGL maintains this behavior for compatibility. Because the variable that generates the display has three INT members, and has a uiType of input, you could, in theory, enter new values for any of those members; in practice, there is no reason to do so.
10 SELECTEDID int [3] {
uiType = none
};
10 ID INT [3] {
displayName = "Pick a number:" ,
selectedIndexItem = SELECTEDID,
uiType = output
} = [1, 2, 3];
10 SELECTEDID int {
uiType = none
};
The displayed control looks like the following example:

10 MYLINK char(32) {
displayName = "MyLink",
uiType = programLink,
@programLinkData {
programName = "DEST_PGM",
uiRecordName = "DEST_PGE",
newWindow = no,
linkParms = [
@linkParameter { name = "PARM", value="ParmData" },
@linkParameter { name = "NAME", valueRef=NAME },
@linkParameter { name = "ID", value="107" }
]
}
};
Here the UI type of programLink causes the contents of the displayName property ("MyLink") to be displayed as a link. That link points to the program in the programName property ("DEST_PGM"), which launches the page in the uiRecordName property ("DEST_PGE"). The names and values in each of the @linkParameter properties are passed in a query string with the URL of the destination program.
10 MYFORM01 char(60) {
displayName = "MyForm01",
uiType = uiForm,
@programLinkData {
programName = "DEST_PGM",
uiRecordName = "DEST_PGE",
newWindow = no,
linkParms = [
@linkParameter { name = "PARM", value="ParmData" }
]
}
};
20 BUTTON1 char(8) {
displayName = "Submit",
uiType = submit
} = "SUBMIT";
When the user submits the form, The VGWebTransaction program calls the program in the programName property using the show command. For information about how field values are passed to the called program, see "show" in the EGL Language Reference.