Radio buttons
Last updated
Was this helpful?
Last updated
Was this helpful?
Use radio buttons to present a list of options from which only one item can be selected. Radio buttons are often used in forms for data entry or as a way to enable client-side filters.
Let us say we want to display a set of items, for instance, a set of books. Information about the books is stored in an Object Class Books
, which has the following properties: Books.Title
, Books.Category
, Books.Author
, etc. We want all of these properties displayed in a Table or a List, but we do not want all of the books to be shown in the same row set. Instead, we want to filter them into a few subsets, based on, for example, the Category
property. The Category
property should then be of an ENUM data type, containing the categories by which we are sorting our Books.
In this case, we can use the Radio Buttons UI component, where we data-bind the Value property of the component to the Category property of our Books Data Source, usually over an App Variable or as a runtime Data Source property, since we only want these Category ENUM values to control the visibility of our subsets and be shown as our Radio Buttons Labels.
Once we set this right, we have to set the Conditional Filters in our Table or List, Enable them to filter out the subsets by these Category properties that are data-bound to our Radio Buttons, and set the Filters to display the right Category per each Radio Button.
Select whether to display a list of objects or a list of possible values for an object property.
Basic Present a list of objects in a data source. When this option is chosen you can select the data source and a property in that data source to use as a label for each option.
Property Display the possible values for an object property. The property must be an enum or a reference to another object class.
Select the data source that contains the objects to list.
Not displayed when Selection type
is Property
and the property is an enum.
Select the property to use as a label for each option.
Not displayed when Selection type
is Property
and the property is an enum.
Apply a filter to the selected data source.
Not displayed when Selection type
is Property
and the property is an enum.
Create conditional filters to apply to the selected data source.
Not displayed when Selection type
is Property
and the property is an enum.
Displayed when Selection type
is Property
and the property is an enum.
Note that if the property is within a many cardinality data source you should ensure that the options are displayed within the context of a single object, for example within an iterating container.
Displayed when Selection type
is Property
and the property is an enum.
Create runtime conditions to restrict the displayed options. The options are evaluated as follows:
The first condition that evaluates to true will be used, the rest are ignored.
If no conditions are defined, all options will be displayed.
If conditions are defined but no conditions evaluate to true, no options will be displayed.
If enabled, the null option will always be displayed.
Property only.
Enable this to add a radio button to allow the user to clear the value.
Property only.
If Allow null
is enabled, enter a label to use for that radio button.
Enter a descriptive label for the list of options.
Enter additional context about the options to help the user.
Enable to auto focus the first option when the radio buttons are rendered.
Select the color of the selected option based on the active theme.
Primary (default)
Secondary
Default (this is the Secondary text color)
Select the margin to apply to the radio button wrapper.
Normal (default)
Dense
None
Select the display orientation of the options.
Vertical (default)
Horizontal
Enable to remove the option labels.
Property only. Requires vertical orientation.
Enable a secondary label for each option containing the enum value's description from the Global Data Model.
On Value Change
Select the property for which to display the list of possible values. The property must be an .
Enable .