RadioButton | X4Documentation

<RadioButton> controls can be used to create radio buttons. Users can select from several predefined options, where only one option can be active at a time. They are particularly suitable for decisions where the choices are mutually exclusive, such as the choice of a payment method or a priority level.

Instructions for use

A <RadioButton> control is created with the <RadioButton> element.

<RadioButton>
...
</RadioButton>

<RadioButton> controls can be used in all available layout types: For more information, see Layouts.

Attribute

Note:

There are a number of default attributes that can be set for all controls. For more information about the default attributes, see Default attributes.

In addition to the default attributes, you can define the following attributes for <RadioButton> controls.:

Attribute	Description
`displayName`	Label of the radio button. Translatable Data binding possible Possible values: Any string
`optionValue`	Required Technical value to be further processed. Data binding (string or boolean) possible Possible values: Any string Note: It is possible to activate additional radio buttons by clicking on a radio button. To do this, the `optionValue` attribute must be identical for all radio buttons that are to be activated by selecting one of the radio buttons.
`value`	Required Radio buttons with the same `value` form a group in which only one radio button can be selected at a time. Data binding (string or boolean) required Possible values: Any string Note: By default, radio buttons are not selected when accessing the Web App. In order for a radio button to be selected when the Web App is called, the values for `optionValue` and `value` must be identical.

Attribute

Description

displayName

Label of the radio button.

Translatable
Data binding possible

Possible values:

Any string

optionValue

Required

Technical value to be further processed.

Data binding (string or boolean) possible

Possible values:

Any string

Note:

It is possible to activate additional radio buttons by clicking on a radio button. To do this, the optionValue attribute must be identical for all radio buttons that are to be activated by selecting one of the radio buttons.

value

Required

Radio buttons with the same value form a group in which only one radio button can be selected at a time.

Data binding (string or boolean) required

Possible values:

Any string

Note:

By default, radio buttons are not selected when accessing the Web App. In order for a radio button to be selected when the Web App is called, the values for optionValue and value must be identical.

Actions

The following action is available for <RadioButton> controls. For more information about actions, see Actions.

`<SelectAction>`

You can insert the Select action using the <SelectAction/> element within <RadioButton>. The action is triggered when the user selects the radio button.

Note:

You must insert the <SelectAction> element before the desired layout type (BoxLayout, FlowLayout, GridLayout, ResponsiveLayout, TabLayout).

The Select action is created with the <SelectAction/> element within <RadioButton>.

Examples

Example 1:

RadioButton control in the Detail Component

XML

<DetailComponent>
    <FlowLayout>
        <Label value="Select your subscription plan" fontSize="large" fontWeight="Bold" horizontalAlign="center"/>
        <RadioButton optionValue="Basic" value="#interest" displayName="Basic" horizontalAlign="left"/>
        <RadioButton optionValue="Standard" value="#interest" displayName="Standard" horizontalAlign="left"/>
        <RadioButton optionValue="Premium" value="#interest" displayName="Premium" horizontalAlign="left"/>
    </FlowLayout>
</DetailComponent>

Example 2:

RadioButton control with Technical Process in the Detail Component

XML

<DetailComponent name="ExampleRadioButton" path="ExampleRadioButton" displayName="Example RadioButton" process="exampleProcess.wrf">
		<Properties>
			<Property name="group" type="String"></Property>
		</Properties>
		<FlowLayout>
			<RadioButton optionValue="true" value="#group" displayName="Button 1" />
			<RadioButton optionValue="false" value="#group" displayName="Button 2"/>
		</FlowLayout>
</DetailComponent>

Output format of the process

The Technical Process exampleProcess.wrf mentioned in the example generates the following output:

XML

<?xml version="1.0" encoding="UTF-8"?>
<Ok>
	<group>false</group>
</Ok>