Button Group

The “Button Group” element is a collection of multiple toggle buttons. In the application, you can use the “Button Group” element when you want the user to select a specific value or a state. In an application, “Button Group” is used to display or specify different values, states, or modes.

In the “Button Group” element, a button specifies a specific value, state, or mode.

Usage

When to Use

Use the “Group of Buttons” element when: –> The user needs to select a specific value or a state –> The application has multiple color-based themes that the user can select desirably. –> The user needs to switch between two or multiple states..

Button Group Configuration

On the “Button Group” element, you can perform the following types of configuration:

• UI Configuration
• Data Configuration
• Security Configuration
• Event Configuration

UI Configuration

For the “Button Group” element, you can configure the followning 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	ButtonGroup_ XXXXX
Basic	Caption	In this box, enter the title (caption) of the element.	No	Button Group
Basic	Default Selected Index	In this box, enter the button’s sequence number (For example:- 1, 2, or 3). Based on the button’s sequence number, the application will display the button selected by default.	Yes	1
Basic	Input Source	This property allows you to configure the source location for the following purposes: a) Fetching data from the source and the display it on the element. b) Storing 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: a) Fetches data from the object and displays it in the element b) 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	Data Store
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		If “Input Source” = “Data Store”
Basic	Visible	If you click to select this check box, the button group element becomes visible on the screen.	No	Selected
Basic	Business Rule	Click this list and then select a pre-defined business rule that will determine the element’s visibility. If the user’s action satisfies the condition in the business rule, the application will display or hide the element. To define the business rule, access the Business Rule Manager module.	No
Basic	Enable	If you click to select this check box, the button group element becomes active on the screen. You can perform the function on the active element.	No	Selected
Basic	Business Rule	Click this list and then select a business rule to make the element active or inactive. If the user’s action satisfies the condition in the business rule, the application will make the element active or inactive in the application. To define the business rule, access the Business Rule Manager module.	No
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.	No	{{fx}}
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.
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. This property provides the following pre-defined styles: –> Primary –> Info –> Warning –> Success –> Danger –> Secondary	No	Primary
UI Properties- Alignment & Spacing	Margin	Allows you to define a margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom borders of the element.	No	Theme Variable (Margin)
UI Properties- Alignment & Spacing	Element’s Allignment	This property contains three tabs. You can use these tabs as follows: 1. Left:- By default, this tab is selected. It aligns the element to the left of the page. 2. Center:- If you select this tab, it aligns the element at the center of the page. 3. Right:- If you select this tab, it aligns the element to the right of the page.	No
UI Properties-Caption	Font	Allows you to define the font of the caption.	No	Open Sans
UI Properties-Caption	Size	In this box, enter the caption’s character’s size in pixel unit.	No	12
UI Properties-Caption	Color	Allows you to define the caption’s font color. To define the color: –> In the Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.	No	#6F6F6F
UI Properties-Caption	Bold	In this box, enter the thickness of the caption’s character.	No	4
UI Properties-Caption	Style	Allows you to define the following styles for caption: –> Normal –> Italic	No	Normal
UI Properties-Option	Font	Allows you to define the font of the button’s option. The button’s option specifies the text that a button displays in the button group element.	No	Open Sans
UI Properties-Option	Size	In this box, enter the option text’s size in pixel unit.	No	12
UI Properties-Option	Bold	In this box, enter the thickness of the option text.	No	4
UI Properties- Shape & Decoration	Type	Under the Shape and Decoration section, this property has the two following options: Autofill:- If you select this option, the element will occupy the available space of the parent layout. Manual:- If you select this option, you can define a specific size of the element.	No	Autofill
UI Properties- Shape & Decoration	Width Value	In this box, enter the width of the element in the pixel unit or percentage unit.	No
UI Properties- Shape & Decoration	Height Value	In this box, enter the height of the element in the pixel unit.	No
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	Current X axis co-ordinates (Inactive state)
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	Current Y axis co-ordinates (Inactive state)
UI Properties- Shape & Decoration	Select Border Color	Allows you to define the selected element’s border color. To define the border’s color: –> In the Select Border Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.	No	#0F61FE
UI Properties- Shape & Decoration	Unselect Border Color	Allows you to define the unselected element’s border color. To define the border’s color: –> In the Unselect Border Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.	No	#0F61FE
UI Properties- Shape & Decoration	Select Background Color	Allows you to define the selected element’s background color. To define the background color: –> In the Select Background Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.	No	#0F61FE
UI Properties- Shape & Decoration	Unselect Background Color	Allows you to define the unselected element’s background color. To define the background color: –> In the Unselect Background Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.	No	#FFFFFF
UI Properties- Shape & Decoration	Select Text Color	Allows you to define the selected element’s text color. To define the text’s color: –> In the Select Text Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.	No	#FFFFFF
UI Properties- Shape & Decoration	Unselect Text Color	Allows you to define the unselected element’s text color. To define the text’s color: –> In the Unselect Text Color box, click the left color box (), and a color canvas open. –> On the canvas, on the horizontal bar, move the circle to select the color. –> In the upper section, move the circle to select the tone of the color.	No	#0F61FE
UI Properties- Shape & Decoration	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.	No	100 %
UI Properties-Tooltip	Show Tooltip	Click this check box to make a tooltip available with the element.	No	Clear Check box
UI Properties-Tooltip	Message	This property allows you to configure the message for a tooltip. To configure the message: Click in this box, and a smart selector expands. In the smart selector, you can select the following: 1. Static Function:- By using the static function, you can manually define the message inside the static function. 2. Element:- If you select the element, the application will fetch the message that is linked to the selected element. 3. Entity:- If you select an entity, the app will fetch the message from the entity.	Yes	{{fx}}	When the Show Tooltip check box is selected
UI Properties-Tooltip	Color	This property allows you to define the color of the tooltip’s message. To define the message’s color: 1. Click the left Color box, a color canvas opens. 2. On the color canvas, move the circle on the upper bar to select the color of the tooltip’s text. 3. Move the circle on the lower bar to define the transparency of the selected color.	No	#6F6F6F	When the Show Tooltip check box is selected
Data Properties	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
Security Properties- Masking	Regex	In this box, enter a regular expression. The application validates the values of the buttons by using the regular expression. If the application successfully validates the values, it displays them on the buttons in the button group element.	No
Security Properties- Masking	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 specified number of characters (for example:- **ample123) from the left. 2. From End This option masks a specified number of characters (for example:- Example1**) from the right. 3. From Start & End This option masks specified numbers of characters (for example:- **ample***) from the left and right of the string. 4. Except Start This option masks all characters except a specified number of characters (for example:- Ex********) from the left. 5. Except End This option masks all characters except a specified number of characters (for example:- ********23) from the right. 6. Except Start & End This option masks all characters except specified numbers 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		If Masking Type = From Start & End
	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 “Button Group” element, you can configure the following event:

• onSelect