We want to create three buttons which behave like radio buttons, but having three colours. They can be used to show a state or punctuation. Behavior and look must be like in the image:

The first thing we need to do is to create the buttons we want to use in HTML.
I have created an html file which contains three buttons. Each button has a value (1,2,3) and a colour (red, yellow, green)
I have also added a :hover style. The hover style applies when mouse is over the area (not pressing). Hover will be blue.


See the Pen HArea_eng_01 by Ivan (@ivan_saiz) on CodePen.

Now we want the button to change its color to black when it’s pressed (you can use another colour if you want) and stay black until another button is pressed. The other buttons will have their usual colour.
To fulfill this task I have created three javascript functions: setBtnValue, uncheckButtons and checkButton.

– With setBtnValue we set the var “btnValue” to the id which is passed as parameter
– With uncheckButtons we set to default every btnValue except the id saved in var “btnValue”
– The function checkButton paints in black the btnValue passed as parameter

In the HTML, inside each DIV we do three things:
– In onClick event we call setBtnValue passing the pressed button ID as parameter
– In onmouseover event we change the colour of that button to blue
– In onmouseout event we call uncheckButtons to remove the blue of all buttons and leave the pressed button black

See the Pen HArea_eng_02 by Ivan (@ivan_saiz) on CodePen.



See the Pen HArea_eng_02 by Ivan (@ivan_saiz) on CodePen.

We have now created the three buttons we want to use but we have to integrate them in PeopleSoft.

To do so, we go to the Page and we add an Edit Box with the field “BUTTON_VALUE” from a derived Record. For example, DERIVED.BUTTON_VALUE (these are examples, you can use whatever field you want).
We enter field properties and update Page Field Name with the name we want to use. For Example “BUTTON_VALUE”


We Add an HTMLArea to the Page to put our HTML inside.
We must load it dynamically, so we assign it to a field. For example, DERIVED.HTML_AREA

We create a new HTML object (for example, MY_HTML) and we copy&paste the HTML we created previously.
The value of the pressed button will be passed as parameter, so we have to do some changes:

var btnValue = 0;    –>    var btnValue = %Bind(:1);

When the button value is updated in our HTML we will also have to update the value of the PeopleSoft field.
We must change the function setBtnValue to do so:

function setBtnValue(value) {
btnValue = value;

We’re doing here the same thing PeopleSoft does:
We call the script which updates the value of field BUTTON_VALUE in current page with the value passed to the function.

Easy. But we have more work to do. If we leave as it is, when page is saved it refreshes the HTMLArea and erases the values, leaving our field with zero value.

To avoid losing this value and prevent our buttons to reset we add the following peoplecode to FieldChange of DERIVED.BUTTON_VALUE:


At last, we must initialize our HTMLArea (for example in the Activate event of our page).
We must pass as parameter the current value of BUTTON_VALUE. If we don’t want to mark any value by default we can pass 0 as parameter.


And it is done. Following these steps we will have a set of dynamic HTML buttons which will behave like radio buttons, and they will be perfectly integrated with PeopleSoft.

Iván Saiz
Latest posts by Iván Saiz (see all)