Using Radio Buttons

Sample code:
Display file source: PUISAMPLES/QDDSSRC(CHECK001D)
RPGLE source: PUISAMPLES/QRPGLESRC(CHECK001R)

Radio buttons come in groups. Only one radio button within a group can be selected, or checked, at any one time. To create a radio button group, drag several radio button widgets onto the canvas. Then, bind their radio button group properties to the same variable. A quick way to do this is to drag your mouse over the radio buttons to select them all at the same time.

This will allow you to use the Properties Window to modify the radio button group property on all the elements within the current selection.

Next, for each radio button, specify the value property. The value will be placed into the variable bound to the radio button group property, if that radio button is selected by the user at runtime.

To initialize a radio button to a checked state, make sure to fill the variable bound to the radio button group property with a literal equivalent to the value property before showing the screen.

Retrieving Radio Button Values in JavaScript Code

In addition to accessing radio buttons from server-side code, it's possible to retrieve the value of a radio button using JavaScript code running in the web browser. To understand how, consider a display used to enter an employee's gender in their HR records.

There are 3 radio buttons to represent Male, Female and Non-Binary. Their id properties are set to RadioButton1, RadioButton2 and RadioButton3, respectively. They are all bound to the same radio button group variable named GENDER which is CHAR(1). RadioButton1's value property is M, RadioButton2's value property is F and RadioButton3's value property is N.

If I use the getElementValue() JavaScript function, I can test each button individually. It will return true if the radio button has been selected or false if it hasn't. For example, to check RadioButton2, I could code the following:

var isFemale = getElementValue("RadioButton2");
if (isFemale) {
  alert("Employee is female!");
}

It's also possible to determine the value of the entire group of radio buttons by calling the pui.getRadioGroupValue() function. This returns the value of the field that was bound to the radio button group property. For example:

var gender = pui.getRadioGroupValue("gender");
if (gender === null) {
  alert("Nothing selected!");
}
else if (gender === "M") {
  alert("RadioButton1 was selected");
}
else if (gender === "F") {
  alert("RadioButton2 was selected");
}
else if (gender === "N") {
  alert("RadioButton3 was selected");
}

Use of the getElementValue() or pui.getRadioGroupValue() function with the radio button widget requires Profound UI version 6, fix pack 16.0 or higher.