Using VGUIRecord properties

The relationship between the field properties determines how EGL translates fields from the VGUIRecord into HTML controls on a JSP.
Most UI controls involve setting the uiType property to one of the following values:

The following table shows how to create each of the specified HTML controls.

Table 1. HTML controls
HTML control Field is array? uiType Field length

selectedIndex-
Item

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
The following code creates a set of three radio buttons:
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:

A set of three radio buttons labeled "First option" and so on. Each label is followed by a text box with a number in it.

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.

If you change SELECTEDID to an array, the code will create a web page with check boxes instead of radio buttons:
10 SELECTEDID int [3] {
		uiType = none
		};
If you take the same code and change the uiType to output, EGL will create a combo box rather than radio buttons or check boxes. Here it makes sense to also change the display name, as the user is selecting a value from the array rather than from the prompt message. If SELECTEDID is an array, the user can hold down the Shift key and make multiple selections. If SELECTEDID is a single INT, as in the following code, the user can select only a single value:
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:

A combo box has the numbers 1 through 3 as options.

Other controls

Other values of the uiType property create other HTML artifacts. Consider the following example of a field from a VGUIRecord source file:
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.

The following example shows a field that generates a <FORM> tag and all associated contents on the browser:
10 MYFORM01   char(60) {
   displayName = "MyForm01",
   uiType = uiForm,
   @programLinkData {
      programName = "DEST_PGM",
      uiRecordName = "DEST_PGE",
      newWindow = no,
      linkParms = [
         @linkParameter { name = "PARM", value="ParmData" }
      ]
   }
};
Substructure fields below MYFORM01 declare fields within the form, such as any of the input or output controls shown earlier, or the following submit button:
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.


Feedback