Radio
This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0
The radio buttons represent a group of mutually exclusive options. In the group of radio buttons/mutually exclusive options, the user can select only one option.

Usage
When to use | When not to use |
When you have a very few options to display on the screen and want the user to select one of them. | Radio button is visible on the screen so do not use it if you have a long list of options to select from. For example:- Do not use the radio button if you want the user to select a city from the list of cities in a state.In this case, you must use the dropdown list. |
Radio Button Configuration
The “Radio Button” element consists of the following properties:
- UI Configuration
- Event Configuration
UI Configuration
For the “Radio Button” element, you can configure the following UI properties:
Tab | Property Name | Description | Mandatory | New Default Value | Visibility Rules |
Basic | Reference Name | Specifies a unique name of the element. At the application level, an element is identified and managed by the reference name. | Yes | RadioButton 1 | |
Basic | Caption | Specifies the title of the element. | No | RadioButton | |
Basic | Max in Row | This property allows you to configure number of rows that will display the radio button descriptor. | No | 1 | |
Basic | Input Source | This property allows you to configure the source location for the following purposes: –> Fetch data from the source and the display it on the element. –> Store data in the source. You can click one of the following tabs to configure the input source: 1) Data Store:- If you select this tab, the Input Value box appears. In the Input Value box, select an entity based array type JSON object. After you select an array type JSON object, the application will access the object and then perform one of the following functions: –> Fetches data from the object and displays it in the element –> Stores data in the object 2) Enumeration:- If you select this tab, a Select Master list appears. Click the Select Master list, and then it displays a list of “enum†objects from the Data Modeler. In the list, select an enum object. After you select an enum object, the application will perform one of the following functions: –> Fetch data from the enum and then display it in the element –> Store data in the enum Note:- To use the enum object, you need to define “enum†in the Data Modeler. | Yes | ||
Basic | Input Value | Click in this box and then select an array type object. After you select the object, the application will perform one of the following functions: –> Fetch data from the object and then display it in the element. –> Store data in the object. | Yes | master(“stateMaster”) | When Input Source = Data Store |
Basic | Wrap | Allows you to wrap the element around the radio button descriptor. | No | unmarked | |
Basic | Visible | Allows you to define the default visibility of the UI element. | No | marked | |
Basic | Enable | Allows the user to enable/disable an element. You can decide whether the element needs to be clickable and usable. | No | marked | |
Basic | Mandatory | Allows you to configure the element as a mandatory element. | No | unmarked | |
Basic | Message on Failure | This property becomes visible when you select Yes under Mandatory. In the Message on Failure box, enter the error message that the application will display if the user does not perform the function on the element. | No | Required | when mandatory = checked |
Basic | Default Value | This property allows you to define the default value of an element. To define the default value: –> Click in this box, and it displays the list of the pre-define functions, attributes, and element IDs. –> In the list, select an attribute from which the application will fetch the default value and then display it in the element. | |||
Basic | Parent Element ID | In this list, you can select the ID of an element. Based on the selected ID of an element, the current element will display the list of values. To select the element ID: i. Click in this box, and it displays the list of the pre-defined functions, attributes, and element IDs. ii. In the list, select an element’s ID. | |||
UI Properties | Styles | Allows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element. These pre-defined styles are: –> Primary –> Success –> Secondary | No | Primary | |
UI Properties- Background | Color | Click the leftmost box and then define the color of the element’s background. | No | Theme Variable (Neutral) | |
UI Properties- Background | Opacity | Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. While configuring the color, you can also configure the opacity in the percentage unit. | Yes | 100% | |
UI Properties- Background | Select Color | Click the first box and then define the color of the element when the user selects the element to perform the function. | No | Transparent | |
UI Properties- Background | Opacity | Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. While configuring the color, you can also configure the opacity in the percentage unit. | Yes | NA | |
UI Properties- Background | Unselect Color | Click the first box and then define the color of the element when the user unselects the element to perform the function. | No | Transparent | |
UI Properties- Background | Opacity | Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. While configuring the color, you can also configure the opacity in the percentage unit. | Yes | NA | |
UI Properties- Alignment & Spacing | Margin | Allows you to desirably define margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom border of the element. | No | Theme Variable (Margin) | |
UI Properties- Alignment & Spacing | Element Alignment | Click this list to align the element as follows: –> Right Top –> Bottom Top –> Right Top –> Left Bottom –> Right Bottom –> Left Center | No | Left Top | |
UI Properties-Caption | Font | Select the font type (For example: – Arial) of the element’s caption. | No | Theme Variable (Font Family) | |
UI Properties-Caption | Size | Enter the font size of the caption. | No | 12 | |
UI Properties-Caption | Color | Select the color of the font of the caption. | No | Theme Variable (Caption) | |
UI Properties-Caption | Bold | Enter the thickness of the character of the element’s caption in the range of values from 1 to 9. | No | 4 | |
UI Properties-Caption | Style | Select the style of font (For example:- Italic) of the caption | No | Normal | |
UI Properties – Option | Font | Select the font of the Option text | No | Theme Variable (Font Family) | |
UI Properties-Option | Size | Select the Font size of the hint text | No | 12 | |
UI Properties-Option | Color | Select the color of the Option text | No | Theme Variable (Answer Text) | |
UI Properties-Option | Bold | In this box, enter the numeric value (for example: – 6) that defines the thickness of the font of the item descriptor. | No | 4 | |
UI Properties- Option | Hide Text | Allows the user to configure the option text as follows: –> Yes: The option text becomes invisible on the screen. –> No: The option text remains visible on the screen. | No | unmarked | |
UI Properties- Shape & Decoration | Type | Under the Shape and Decoration section, this property has the two following options: Autofill:- If you select this option, you cannot change the element’s dimensions. When you drag the element to the canvas, this option is selected by default. If you select Auto Fill, vDesigner places the element with the default dimensions. Manual:- If you select this option, you can change the dimensions of the element. | |||
UI Properties- Shape & Decoration | Width Value | Enter the width of the element in the pixel unit or percentage unit. | No | 100% | |
UI Properties- Shape & Decoration | Height Value | Enter the height of the element in the pixel unit. | No | Set as ___ & Disable | |
UI Properties- Shape & Decoration | X | Allows you to move the element along the X-axis; when the value increases, the element moves from left to right. | No | Show & Disable | |
UI Properties- Shape & Decoration | Y | Allows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom. | No | Show & Disable | |
UI Properties- Shape & Decoration | Border Color | Click the first box and then define the color of the element’s border. | No | Transparent | |
UI Properties- Shape & Decoration | Opacity | Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. | Yes | NA | |
UI Properties- Shape & Decoration | Select Color | Click the first box and then define the color of the element when the user selects the element to perform the function. | No | Theme Variable(Primary) | |
UI Properties- Shape & Decoration | Opacity | Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. | Yes | 100% | |
UI Properties- Shape & Decoration | Unselect Color | Click the first box and then define the color of the element when the user unselects the element to perform the function. | No | #161616 | |
UI Properties- Shape & Decoration | Opacity | Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. | Yes | 100% | |
Data | Entity Path | This property allows you to map an attribute to the element. You define the JSON based attributes in the entity in the Data Modeler module. To define the entity path: –> Click in the Entity Path box, and a list expands. –> The list displays several attributes from the entity. –> In the list, select an attribute to map it to the element. After the user performs the function on the element, the application can perform the following functions: a. Fetches data from the attribute and then displays it in the element. b. Stores data in the attribute. | No | EntityName. | |
Security | Regex | In this box, enter a regular expression. After the user performs the action on the element, the logic of regular expression checks the user action.If the user action does not satisfies the regex (regular expression), application displays the error message. | No | ||
Security Properties-Basic | Data Masking | This property allows you to mask the data. After you click the Data Masking check box, the following boxes appear: 1. Masking Type 2. N 3. Masking Symbol | No | Clear Check box | |
Security Properties-Basic | Masking Type | Click this list to select one of the following options: 1. From Start This option masks a specific number of characters (for example:- **ample123) from the left. 2. From End This option masks a specific number of characters (for example:- Example1**) from the right. 3. From Start & End This option masks a specific number of characters (for example:- **ample***) from the left and right of the string. 4. Except Start This option masks all characters except a specific number of characters (for example:- Ex********) from the left. 5. Except End This option masks all characters except a specific number of characters (for example:- ********23) from the right. 6. Except Start & End This option masks all characters except a specific number of characters (for example:- Ex*****123) from the left and right. 7. All Alphabets This option masks all alphabets (for example:- *******123) in the string. 8. All Numbers This option masks all numbers (for example:- Example***) in the string. 9. All This option masks all characters in the string. | No | From Start | If Data Masking check box is selected |
Security Properties-Basic | N | This box comes into view after you click the Data Masking check box. In this box, enter a numeric value that specifies the number of characters that are masked from right or left in the string. For example:- If you select From Start in the Masking Type list and then enter 4 in the N box, the data masking property masks four characters from the left. If you select From End in the Masking Type list and then enter 4 in the N box, the data masking property masks four characters from the right. | No | If Data Masking check box is selected | |
Security Properties-Basic | M | This box comes into view after you select From Start & End in the Masking Type list. In the M box, enter a numeric value that specifies the number of characters that the Data Masking feature masks from the right of the string. For example:- If you enter 4 in the M box, the data masking property masks four characters from the right. | Yes | f Masking Type = From Start & End | |
Security Properties-Basic | Masking Symbol | Click this list and then select one of the following characters that you can use as a masking symbol or character: 1. * 2. & 3. % 4. $ 5. # 6. @ 7. x 8. – 9. + | No | If Data Masking check box is selected |
Event Configuration
On the “Radio Button”, you can configure the following events:
- onSelect
Was this article helpful?
YesNo