X4 Produktdokumentation
X4 Produktdokumentation
Breadcrumbs

RadioButton

<RadioButton> controls are used to create a group of buttons. The user can only select one radio button from this group at a time.


Attribute

Description

displayName

Label of the radio button

  • Translatable

  • Data binding possible

Possible values: Any string

optionValue

Required. Technical value that is processed.

  • Data binding (string or boolean) possible

Possible values: Any string

Note;

It is possible to select additional radio buttons by clicking on a radio button. To do this, the optionValue attribute must be identical for all radio buttons you want to select by selecting one of them.

value

Required. Radio buttons with the same value form a group from 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 the web app is opened. The values for optionValue and value must be identical so that a radio button is already selected when the web app opened.

background

Defines a color for the background of the control.


  • This setting overwrites the default color of the color scheme!

  • This attribute doesn't work with the Maps and HtmlDocument controls!

Possible values:

  • Hexadecimal color value, e.g. ff5a00

    Do not use a hash in front of the color value!
    do not use a shortened notation of the color value!


  • Color code from the color palette of the Web App (see Theming), e.g. A200

enabled

Defines if the user can interact with the control.

  • Data binding (boolean) possible

Possible values: true / false or data binding expression

The enabled attribute replaces the obsolete disabled attribute. enabled="true" thus corresponds to the obsolete disabled="false" attribute .

fontFamily

Defines the font family.

  • This attribute overrides the default font of the Web App for this control.

  • If the attribute is defined on an element, the font family is inherited by the element's child elements, unless the child elements have the fontFamily attribute explicitly set.

  • This attribute doesn't work with the Image, Maps and HtmlDocument controls.

Possible values:

  • MainFont: Stored main font

  • Font code from the font palette, e.g. Font04

fontSize

Defines the font size.

  • This attribute overrides the default font size of the Web App for this control.

  • This attribute doesn't work with the Image, Maps and HtmlDocument controls.

Possible values:

  • Any integer or decimal number with a dot as decimal separator, e.g. 20; 20.8; .9

  • Font size in pixels, e.g. 20px

  • Font size in points, e.g. 18pt

  • Font size compared to the font size of the parent element, e.g. .8em or 120

  • Key words: xx-Small, x-small, small, medium, large, x-large, xx-large, smaller, larger

fontStretch

Sets the width of the single characters.

This attribute overrides the default width of the characters of the Web App for this control.

Possible values:

  • Condensed

  • Expanded

  • ExtraCondensed

  • ExtraExpanded

  • Medium

  • Normal (default)

  • SemiCondensed

  • SemiExpanded

  • UltraCondensed

  • UltraExpanded


This attribute doesn't work with the Image, Maps, Charts and HtmlDocument controls.

fontStyle

Defines the font style.

This attribute overrides the default style of the characters of the Web App for this control.

Possible values:

  • italic: italic characters

  • normal: normal characters (default)

  • oblique: italic characters (calculated)


This attribute doesn't work with the Image, Maps and HtmlDocument controls.

fontWeight

Defines the font weight.

This attribute overrides the default font weight of the Web App for this control.

Possible values:

  • Black

  • Bold

  • DemiBold

  • ExtraBlack

  • ExtraBold

  • ExtraLight

  • Heavy

  • Light

  • Medium

  • Normal (default)

  • Regular

  • SemiBold

  • Thin

  • UltraBlack

  • UltraBold

  • UltraLight


This attribute doesn't work with the Image, Maps and HtmlDocument controls.

foreground

Defines a color for the foreground (texts etc.) of the control.

  • This setting overwrites the default color of the color scheme!

  • This attribute does not work with the Map and HtmlDocument controls!


Possible values:

  • Hexadecimal color value, e.g. ff5a00

    Do not use a hash in front of the color value!
    do not use a shortened notation of the color value!


  • Color code from the color palette of the Web App (see Theming), e.g. A200

horizontalAlign

Direction in which the elements flow. The order of the elements corresponds to their declaration.

Possible values:

  • left (default)

  • center

  • right

textOverflow

Defines what happens if the page is full.

Possible values:

  • ellipsis: Show with ... that the text is not finished

  • hidden: Break off text, paying attention to whole words

  • wordBreak: Break off within the word

  • allow (default): Break off text between words

visible

Defines if the control is visible.

  • Data binding (boolean) possible

Possible values: true / false or data binding expression

"Select" Action within a radio button

The Select action is created via the element <SelectAction/> within <RadioButton> and is triggered as soon as an entry has been selected.

Example <RadioButton>

The following example shows the usage of the <RadioButton> tag.

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 above example generates the following output:

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

The above code generates the following output in the web app:

Radio_Buttons.png