You are here: User interface > User interface rules > Harness, Section, and Flow Action forms > Harness and Section forms - Adding a Radio Button control

Harness and Section forms - Adding a Radio Button control

About radio buttons

Radio button controls present users with a horizontal or vertical list of options, from which the user can select a single option.

You can specify the source of this list as one of the following:

list defined on a property
clipboard page
data page
Report Definition

When a radio button control is bound to a data page or report definition that accepts parameters and the parameter value uses a property reference, the radio button group automatically refreshes with new items whenever the property value changes. You can use this functionality to set up cascading radio button lists or any combination of controls — no additional configuration is required.

You can configure events and actions on the radio button control, include a No Selection option, and define styles in the skin, if desired.

Upgrading radio button controls

Pega 7 Platform includes the radio button control, pxRadioButton. The pre-Pega 7 Platform radio button control is deprecated. If a section contains a deprecated radio button or another control for which there is an improved alternative, a warning displays, along with an Update Controls button. Click Update Controls to automatically update deprecated controls in the section. Automatic update is not available for all controls; see Upgrading deprecated and outdated controls on the PDN.

If you have a use case that requires a specific configuration of a standard control, such as radio button, you can make a copy of the control and save it using a new name. For example, if you use a Yes/No radio button frequently, you can save a copy of pxRadioButton as pxYesNoRadioButton. Configure pxYesNoRadioButton to display Yes/No radio buttons, and then use pxYesNoRadioButton wherever you'd like it. Do not modify the Control Modes and UI Element settings.

The UI Gallery landing page contains a working sample. To view and interact with the sample, select Designer Studio > User Interface > UI Gallery. In the Components area, select Radio Button.

Adding a radio button control

Click the down-arrow at the right end of the Basic control group and select the Radio Button group control .
Drag the control into the layout and release the mouse button to drop the control.
If you are using a cell-based layout and you drag the control into a cell that is not empty, then the dropped control replaces the current contents of the cell.
Click the magnifying glass to display the Properties panel.
On the Properties panel, define the radio button using the following tabs:

General

Presentation

Actions

For more information, see Presenting radio buttons on the PDN.

Copy, delete, duplicate, or move a radio button group

To move a radio button group, hold down the SHIFT key, select the radio button group in the layout and drag and drop it in the new location.
To cut, copy, or paste a radio button group in a layout, right-click the control to access a context-menu.

Radio button control - General tab

Radio button control - Presentation tab

Open topic with navigation