Radio Button
  • 23 Oct 2024
  • 12 Minutes to read
  • PDF

Radio Button

  • PDF

Article summary

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:

Radio button

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:

  1. Navigate to the Design step of the Form Designer by selecting Designer > Form Designer > Design Form tab. 
  2. Expand the control library, from the Form Controls section locate the Radio Button control.
  3. Drag and drop the Radio Button control to the desired location on the canvas. 
  4. Hover over the added control to access the gear icon for configuration. 
  5. 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

FieldDescription
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

FieldDescription
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 viewIf 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

FieldDescription
Validations
TenantSelect 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
MandatorySelect 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. 
DisabledSelect 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.
HiddenSelect the Hidden from the drop-down list to make the control a hidden control.
EditableSelect the Editable from the drop-down list to make the control editable.
Below Conditions MeetSelect 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.

  • Use  icon to add more conditions.
  • Use  icon to delete conditions.
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:

FieldDescription
Text
Font TypeChoose the desired font type from the drop-down menu to customize the appearance of the Radio Button label.
Font ColorSelect a font color from the color palette to enhance the visibility and aesthetics of the label.
Font SizeAdjust the font size to your preference for better readability and presentation of the Radio Button Label.
Font StyleApply 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:

FieldDescription
General
Restrict field accessToggle 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.

EncryptedToggle 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
ParentSelect 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 type
For 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: 

  • Workgroup (Parent Control): Users select a workgroup from a drop-down menu representing different departments within the IT organization (e.g., Network Support, Software Development, Help Desk).
  • Analyst (Child Control): Based on the selected workgroup, another drop-down menu dynamically updates to display the analysts available in that workgroup. This drop-down contains the names of individual analysts assigned to the selected workgroup.

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
ParentSelect 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.

LayerSelect 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
TableSelect 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 ColumnSpecify 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 

Field

Description

Data Source

Select the type of source. Here API is selected from the drop-down list.
ParentSelect 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. Example: If Parent field is SSN of a citizen and it needs to be secured at database level, enable Is Parent Encrypted button.

Origin
This field is visible only if Data Source is selected as API.
Select the origin for the API request. Available options are as follows:
Same Origin - Select it if the API request is from same origin.
Cross Origin - Select it if the API request is from different origin.
For Example:
Scenario I
Origin I = https://www.acme.com/222
Origin 2= https://www.acme.com/111
In this case, Origin I and Origin 2 are same Origin.
Scenario II
Origin I = https://www.acme.com/222
Origin II = https://www.example.com/222
In this case, Origin 1 and Origin 2 are cross Origin.

Type

Select the type of the API. Available options are as follows:
Get - Select it to fetch data from a specified resource.
Post - Select it to send data to update a resource.
AddressSpecify the API URL. 

Parameters

Select the Parameters from the drop-down list. 

Label Field
Label is the text that appears to the user for that choice. Use short phrases in your choice lists.
Value Field
Value is a string that is stored in the variable when that choice is selected.

Filter Records

Specify the field, value and operator to filter the records. Figure: Filter Records

Click it to delete the filter set.

Click it to add more filter sets.

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.




Was this article helpful?

What's Next
Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.