- 04 Jul 2024
- 12 Minutes to read
- Print
- PDF
Radio Button
- Updated on 04 Jul 2024
- 12 Minutes to read
- Print
- PDF
In Form Designer, a Radio Button is a clickable option that lets users choose one item from a list of options. It is ideal for situations where only one selection is allowed, such as selecting a gender or a preference from a list.
Refer to the screenshot of Radio Button in producer screen for more details.
Figure: Radio Button
Let's explore the following Use Case for navigating through Radio Button!
Use Case User Persona: Administrator | Solution |
Sandra at NovaTech, aims to streamline customer enquiries by categorizing them into "Technical Support," "Billing Inquiry," or "Product Feedback" within the call management module of their customer service platform. | Sam drags and drops the Radio Button from the panel and titles it as Customer Enquiry. With Manual data source values added as "Technical Support," "Billing Inquiry," or "Product Feedback". This helps to streamline the call routing process, ensuring that each inquiry is directed to the appropriate department for efficient resolution. |
For details about the Use Case, refer to the graphics below:
Configure Radio Button control
The section contains the list of steps to perform the configuration of Radio Button control.
To configure the Radio Button, perform the following steps:
- Navigate to the Design step of the Form Designer by selecting Designer > Form Designer > Design Form tab.
- Expand the control library, from the Form Controls section locate the Radio Button control.
- Drag and drop the Radio Button control to the desired location on the canvas.
- Hover over the added control to access the gear icon for configuration.
- Click on the gear icon to open the configure properties pop-up window for the Radio Button control.
Figure: Radio Button control
You can view the following tabs on the Settings for this field:
Properties
All the General Properties for the radio controls are displayed below followed by the details about each property.
Figure: Properties tab
This table contains the list of fields and their descriptions that are available under the Field Description section:
Field Description
Field | Description |
---|---|
General | |
Title | Specify unique name for the radio control. This name identifies the radio control in the form. Example: Here Radio Button is titled as Gender. Figure: Title |
Sub Title | Specifies the text which you want to display just beneath the Title. You may use it to describe the purpose of the control or the way it should be used. Figure: Sub Title |
Informative | |
Information about the UI control in the form | |
Help Text | Provide a help text that gives the user an idea of the required format in a way to prevent input errors. It offers guidance on how to fill out the field correctly or explains the purpose of the field. May include examples, formatting guidelines, or links to more information. |
Rich Text | Select it to enable the text as rich text and interpret it as rich text. It allows you to make the text in bold, italicized, etc. Rich texted ‘Help Text’ improves user understanding by allowing formatting like bold text, images, and clickable links, making information clearer and more interactive for users. Figure: Rich Text |
Tooltip | A tooltip is a small pop-up message explaining a field when hovered over. Type in the Tooltip field. |
Advance
The list of Advance setups using which the Application Designer can configure the Radio Button. To know more about the fields that are available under the Advance section, see Field Description.
Figure: Advance
Field Description
Field | Description |
---|---|
General | |
Include as Filter | If this toggle button is enabled, then control is available as a filter option on the Form Designer list page of the application. Figure: Include as Filter |
Include as column in a grid view | If this toggle button is enabled, then control is available in grid view on the Form Designer list page of the application. Figure: Include as a Column |
Is Clickable? | If this toggle button is enabled, then the Radio Button field can be included in the export template for the form. Figure: Is Clickable |
Validations
You can add Pre-built validations to save time and effort by ensuring data accuracy and completeness without the need for custom rules. These validations offer a standardized method of data validation across forms, reducing errors and improving data reliability.
Figure: Validations
To know more about Validations, see the Field Description given below.
Field Description
Field | Description |
---|---|
Validations | |
Tenant | Select the tenant from the drop-down list if the validation should only be applied to that tenant. For All Tenants, select this option from the Tenant drop-down if the validation should be applied universally across all tenants, regardless of the selected tenant in the transaction or admin record. For "Specific Tenant," choose a particular tenant if the validation only applies to that tenant. Please note that validations added for a specific tenant will always take precedence over common validations. Figure: Tenant list |
Radio Button should be | |
Mandatory | Select the Mandatory from the drop-down list to make the control mandatory. It ensures that the field must be filled out before submitting the form. |
Disabled | Select the Disabled from the drop-down list to make the control a disabled control. This prevents users from interacting with a field, effectively making it read-only and preventing any changes or inputs. |
Hidden | Select the Hidden from the drop-down list to make the control a hidden control. |
Editable | Select the Editable from the drop-down list to make the control editable. |
Below Conditions Meet | Select this option if you want the validations on the control to be triggered based on a specific condition(s). Figure: Conditions Configure the conditions using the following fields: Field: Choose the field from the dropdown list to which the condition applies. Value: Define the value for the chosen field, determining when the condition should be triggered. Select the value from the respective field type for referenced fields such as single choice and tree control. Here Classification is selected as condition, with operator equal to is and value as Issue/Hardware from the tree control.Figure: Below Conditions Meet Operator: Select the appropriate operator from the dropdown list, which varies based on the selected field type.
|
Every Time | Select Every time if you want to display this control always without any specific conditions.Figure: Every time |
Appearance
Customize controls appearance by aligning brand colors through appearance properties, enhancing user experience, and reinforcing brand identity.
Figure: Appearance tab
To know more about the fields that are available under the Appearance section, see Field Description given below.
Field Description
This table contains the list of fields and their descriptions that are available under the Appearance section:
Field | Description |
---|---|
Text | |
Font Type | Choose the desired font type from the drop-down menu to customize the appearance of the Radio Button label. |
Font Color | Select a font color from the color palette to enhance the visibility and aesthetics of the label. |
Font Size | Adjust the font size to your preference for better readability and presentation of the Radio Button Label. |
Font Style | Apply font styles such as Bold, Underline, or Italic to emphasize specific text within the Radio Button Label. |
Security
Enhance data protection and confidentiality by implementing restricted access or encryption for sensitive field data. This ensures that only authorized user roles can view or edit the data. To know more about the fields that are available under the Security section, see Field Description given below.
Figure: Security under Encrypted state
Field Description
This table contains the list of fields and their descriptions that are available under the Security section:
Field | Description |
---|---|
General | |
Restrict field access | Toggle the bar to activate control access to interact with or modify the radio button options. This ensures that designated roles have exclusive editing or viewing access to the content within the Radio Button field. For Example: In a financial management system, only designated financial analysts or managers should have access to view or edit sensitive financial data entered in a Radio Button field. |
Encrypted | Toggle the bar to convert data into a form that is unreadable for unauthorized users. This ensures that sensitive information remains secure and confidential by making it unreadable without the appropriate decryption key. For Example: Patient medical records entered a text area field can be encrypted to protect patient privacy and comply with regulations such as HIPAA. |
For more details about Security, see Form Security.
Data Source
The Data Source section allows users to specify the data origin for radio control, enabling the selection of predefined options or dynamically populated choices from external sources.
Using this option, you can define from where the Data Source should populate for the control. A few available options are:
Manual
A method of defining data directly within the form design interface without relying on external sources. Form designers manually input and manage the options for choice controls or other form elements, providing flexibility and control over the available selections. Use this option when the label count is around 1 to 10. Based on the option selected by the user, the fields will populate on the Data Source tab.
Let us see how to configure Manual Data Source for reference controls! Refer to screenshot below.
Figure: Data Source
See the Field Description for more details.
Field Description
Field | Description |
Data Source | Select the type of source. Here Manual is selected from the drop-down list. Figure: Data Source |
Parent | Select the Parent from the drop-down list. The Parent property allows to establish a hierarchical relationship between controls within a form. When defining this property, you can specify another control on the form that serves as the parent control for the selected control. This association impacts the behavior or visibility of the child control based on the value selected for the parent control. Figure: Parent typeFor example: In an IT service management application where analysts are assigned to workgroups to handle different types of incidents, you can specify parent and child controls in the forms. See the section below for more details. In this form:
|
Is Parent Encrypted? | If this toggle button is enabled, the Parent field value is encrypted at the database level to maintain security. |
Label Name | Type in the option label in the Label Name field. It refers to the name of a data source value as it appears to users on the interface. |
Value Name | Type in the short code you want to store in the database in the Value Name field. It refers to the internal identifier used by the system to represent that value. |
Drag this icon up or down to reorder to reorder a row a value. | |
Select the font color for the text label. | |
Select the background color for the text label. | |
If this toggle switch is enabled, the corresponding label name will be displayed for the user for selection. If this toggle switch is disabled, the corresponding label name will not be displayed for the user for selection. | |
Click it to delete the label for user access and database. | |
Clicking this option adds additional rows for adding more labels. | |
Default | When the switch is enabled, this value is automatically pre-selected for the consumer, though the consumer has the option to change this selection. |
Active | These are the values that are currently enabled and available for selection by the user. Inactive values are not displayed to the end user, ensuring that only relevant and usable options are presented. |
Table
A table data source refers to a structured collection of data stored in a database. This source allows form designers to populate data from the Platform layer or Application or Module layer tables. Use this option when the label count is more than 10. For example – 50 to 100. This section contains the fields and their descriptions available under the Data Source for Table type.Figure: Table
See the Field Description for more details.
Field Description
Field | Description |
Data Source | Select the type of source. Here Table is selected from the drop-down list. Figure: Data Source |
Parent | Select the Parent from the drop-down list. Refer to Manual Data source for more details about Parent control. |
Is Parent Encrypted? | If this toggle button is enabled, the Parent field value is encrypted at the database level to maintain security. |
Layer | Select the layer from the drop-down list. Here Asset Management is selected as the Layer. Figure: Layer When the layer is selected as Platform, all the Platform layer tables will be available in the drop-down list. Screenshot Figure: Layer - Platform When the layer is selected as any application, it displays list of available modules under that application. You can select the required module from the Module drop-down. It displays the list of all tables available under that selected module. Screenshot Figure: Layer - Asset Management |
Module | This option will be available only if Layer is selected as any application such as Service Management, Asset Management. Figure: Module Options |
Table | Select the required table from the drop-down list. The Table drop-down displays the list of all tables available for the selected Application from Layer drop-down and selected module at Module drop-down. Example: For Layer selected as Service Management, Module selected as Incident, the Table drop-down displays the list of all the tables available under Incident module of Service Management application. Figure: Table |
Label Column | Type in the option label in the Label Column field. It refers to the name of a data source value as it appears to users on the interface. Here Asset ID is selected from the drop-down list. Figure: Label Column |
Filter Column | Specify the column name to apply the filter from the drop-down list. |
Filter Records | Specify the field, value and operator to filter the records. Figure: Filter Records You can add Dynamic filter under Operator. A sample screenshot is shown below:Figure: Filter Record - Dynamic Operator Example: If you select the Field as Asset Owner, Operator as Dynamic, and Value as Logged in User, Asset Owner, it will filter the records with the fixed assets allocated to the logged-in user as an Asset Owner. Dot walking concept is supported for the Field. Figure: Filter Record - Dot Walking Example: If you select the Field as Asset Owner.Location, Operator as Dynamic, and Value as Logged in User, Asset Owner, it will filter the records with the fixed assets allocated to the logged-in user as an Asset Owner for a specific location. |
Click it to delete the filter set. | |
Click it to add more filter sets. |
API
When configured as a data source, it provides controls with the ability to fetch and populate choices with data retrieved in real time from the external system. This section contains the fields and their descriptions available under the Data Source for API type.
Figure: API
See the Field Description for more details.
Field Description
Click Save to save the configurations. Configurations get saved, window closes, and control moves back to design canvas. If you want to cancel the configuration, click Cancel.