The Radio Filter control allows users to apply a filter to a set of data or content by selecting a single option from a predefined list. Once an option is selected, the filter is applied, and the display is adjusted to show only the relevant information corresponding to the chosen option.
Add Radio Filter to the form
Firstly, find the Radio Filter control in the controls add panel. Then, drag and drop it into a section or container on your form.
Basic of the Radio Filter field
Open the Content > Basic block and set the Title's text of this Radio Filter control. For more information about Title for field control, please refer:
Set the Associated variable for this Radio Filter control. When you add a new Radio Filter control, a default variable will be generated automatically. You can click the Edit Button to change the name or click the Reset button to bind this Radio Filter control to other existing variables. For more information, please refer:
Then, in the Apply type section. Choose on typing or click on apply button. For more details on Apply types, refer to:
Choice options of Radio Filter
In the Application section, select current application or a different application from the dropdown list.
Afterward, move on to the Data Source section. Select the data list under the selected application.
In the Data Filters section, click the condition button to filter the data from the selected data list.
Display Field: Select the field which will be displayed as the value of selected items.
Value Field: Select the field which will be filtered by the value of selected items.
Please note: The following types of fields cannot be used in the value field:
Multiple line
Rich text
Multiple select
Multiple Meta
Attachment
Image
User - when set to multiple users
Department - when set to multiple departments
Cost center - when set to multiple cost centers.
Maximum items: the maximum number of items will be presented within the drop-down list.
Appearance of the Radio Filter field
Open the Content > Appearance block to set the appearance and layout of this Radio Filter control.
Layout: Set the layout of the choices to be displayed horizontal or vertical.
Search enabled: This functionality is beneficial when dealing with an extensive list of options. It conserves space on the form and allows users to search for and reveal specific options by typing in the search bar. When the search is enabled, the Placeholder setting shows toSet the text of the placeholder for this field.
Note:
Users need to input from the initial word of when searching for a key field.
More/Less enabled: This feature is useful when dealing with content that can be expanded or collapsed. It allows users to reveal additional information or reduce content visibility as needed.
Dropdown enabled: This style is suitable when the list of options is long. It saves space on the form and only reveals the options when the user clicks on the dropdown.
Display Title: Choose display or hide the label of this control. For more information, please refer: Understand the title of field controls
Vertical Align: When Title Layout is set to horizontal, you can set the vertical alignment to Top, Center or Bottom.
Title Width: Set the Width for the title in PX or %.
Dynamic Display Rules: When you set a dynamic display rules, it behaves differently based on specific conditions and rules.
Validation of the Radio Filter field
Open the Content > Validation block to set the properties of this Radio filter control.
Readonly: Turn this ON will make this field control as view only status.
Custom Validation: Set the custom validation rules. An error message that will display under your field when specified conditions become true. It will allow you to add any number of rules for validating your field.
Action call of the Radio filter field
Open the Content > Action block to call a pre-defined action from the drop-down list. This action will be triggered once the value of this Radio filter field is changed.
Style the Radio filter control
Set the styles when the display style is set to Radio filter control.
Option items
Open the Style > Option items block to set the styles of the field control.
Gap between control and option label: Set the spacing between the Radio Button, and the text of option label.
Items Alignment: Set the alignment of this Radio filter control as left, center or right.
Normal / Active / Disabled: Set different styles for normal, active and disabled state of the Radio filter control. Styles below are supported to be set separately for normal, active and disabled state.
Color: Choose the front color of the Radio button.
Background Color: Set background color of the Radio button.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Width – Set the Width of the Radio filter control.
Option Label: Set the style of the option label after the Radio filter control:
Typography: Set the typography options for the text of the option label.
Color: Choose the text color of the option label.
Background Color: Set background color of the option label.
More Less toggle
Open the Style > More Less toggle block to set the styles of the field control.
Padding: Set the Padding of the More Less button in PX or %.
Alignment: Set the alignment of the text in the More Less button area.
Typography: Set the typography options for the More Less button 's text.
Color: Choose the color of the More Less button 's text.
Background Color: Set background color of the More Less button. By default, the background color is set as transparent.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Shadow: Set the shadow of the field.
Holder
Margin: Set the Margin of the Holder in PX or %.
Style of title
Style the Title of field controls that are applicable to this control.
Advanced Settings
Set the Advanced options that are applicable to this control.