Overview
A Radio Button is a UI element that allows users to select one option from a group of mutually exclusive choices. It is represented as a small circle that fills in with a dot when selected.
Attributes of of Radio Field
Basic:
...
Attribute Name | Description | ||
---|---|---|---|
Label | A Label is the name shown to users and can come from various sources.
| ||
Place holder | This is a hint or example text displayed in an input field before the user enters their own data. | ||
Field Type | Here you can choose different field types.
| ||
Layout | Field Layout allows you to arrange fields on the form. | ||
Hide Space Checkbox | After marking this checkbox as true, it will crop the extra corners of the fields. | ||
Show horizontal Checkbox |
Config:
Attribute Name | Description | ||
---|---|---|---|
Debounce time in seconds | "Debounce time in seconds" refers to the delay period set to prevent a Event from being called.
| ||
Help Text | Provides additional guidance or information about a field or element to assist users in understanding how to complete it or what data is expected. | ||
Picklist Values | Here, users can add picklist values. | ||
Is Page Size Options Checkbox | If the "Page Size" checkbox is marked as true, the page size options will be displayed. | ||
Application Name | Here, you can select the application name from the list. | ||
Hide Search Checkbox | If the "Hide Search" checkbox is marked as true, the search checkbox will be hidden. | ||
Is Dependent Checkbox | |||
Show Drop Down Up checkbox | If the "Show Drop-Down Up" checkbox is marked as true, the drop-down menu will appear above the picklist. | ||
Hide Select Icon | If the "Hide Select Icon" checkbox is checked as true, the select icon will not be displayed. | ||
Option Limit | In the "Option Limit" section, you can set the picklist display limit to 5, 7, or 10 items. | ||
Show Description Checkbox | If the "Show Description" checkbox is marked as true, the description will be displayed. | ||
Description Label | Here, users can enter the description label name. | ||
Value Destination Types | This attribute specifies whether the user wants to store a value in a variable or a model. Model: Here, you can select "Model" as the value destination.
| ||
Value Destination Variables | Here you can choose the variable option from this list.
| ||
Value Destination Model |
|
UI:
...
Config:
Attribute Name | Description | ||
---|---|---|---|
Component Size |
| ||
Margin Location | "Margin Location" refers to the spacing around the outside edge of an element | ||
Margin Size | "Margin Size" refers to the amount of space around the outside edges of an element, | ||
Style |
| ||
Classes |
|
Conditional Visibility:
...
Attribute Name | Description | ||
---|---|---|---|
Visibility Type | It determines whether a component is visible on the layout. It offers the following visibility types:
|
Validation:
Attribute Name | Description |
---|---|
Required Type | Here, users can apply validation based on filter conditions.
|
Required Error Message | Enter the error message you want to display for required fields. |
Read Only:
Attribute Name | Description | ||
---|---|---|---|
Read Only Type | It specifies whether a component can be edited by users. It offers the following options:
|
Conditional Disability:
...
Attribute Name | Description | ||
---|---|---|---|
Disability Type | It determines whether a component is disable on the layout. It offers the following visibility types:
|
Component:
Attribute Name | Description |
---|---|
Component Label | It simply shows the name over the field. |
Label Source Type:
...
Attribute | Description |
---|---|
Model (Salesforce Object) | From this source, users can select a Model (Salesforce Object) field to be displayed as the label name. |
Variable | Here, users can select the label name from variables such as Record ID, Is Disabled, Is Read only, or Is Visible. |
Cookie Key | Choose the available cookie key whose value you want to include from your browser. |
Local Storage Key | Select the available Local Storage Key whose value you want to include from your browser. |
User | Here, you can choose the label from user fields such as First Name, Last Name, Email, Name, Phone, or Session ID. |
Merge Field Expression | Merge Field Expression displays the value selected from the chosen value source. |
Message Body | Inside the message body, user also can add the values manually. |
Include Page | ||||
---|---|---|---|---|
|
Events:
Events are essentially the automation of invoking the component's actions.
Here, we have onload event, click, double click actions are available for this components.
Icon Events | Description |
---|---|
onload | This event action is triggered when the Field component is loaded. |
change | This event action is triggered when the field is changed.. |
blur | This event action is triggered when the field is unfocused. |
Below here is the onload event workflow action.
Info |
---|
Note: Similarly you can create event action for change event and blur. |
on Load Event:
...
In the image below, you can select the created workflows.
...
Info |
---|
Note: "You need to create a workflow for selecting from this list. |
For more information about Workflow check this out.
Info |
---|
Reference: Workflow |
onload Events:
We have an onload event that runs when the component is loaded
Panel | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
For example, when a form is loaded, you can choose fields to be prepopulated by mapping field values using input mapping at the time the form component is loaded. |
Input Mapping
...
Input Mapping: "Whenever an event is triggered and you want to pass data to destinations such as models, variables, or components, you can use input mapping to achieve that.
...