Checkbox

This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0

Checkboxes are used for multiple choices, but not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list. Selecting a checkbox does not affect any other selection.

For example:-For taking the user’s hobbies as an input, you can provide multiple hobbies with the check boxes. The user can click more than one checkbox to select multiple hobbies. 

Usage

When to useWhen not to use
Used for selecting multiple values from a specific set of options.If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but the check box just marks the state as changed and this needs to be submitted.

Check Box Configuration

The check box element include the following configurable properties:

  • UI Configuration 
  • Event Configuration

UI Configuration

For the checkbox element, UI configuration include the followings:

TabProperty NameDescriptionMandatoryNew Default
Value
Visibility Rules
BasicReference NameSpecifies a unique name of the element. At the application level, an element is identified and managed by the reference name.YesCheckBox 1
BasicCaptionDenotes the title of the element.NoCheckbox
BasicMax in RowAllows the user to define the maximum number of checkboxes to be displayed in a rowNo1
BasicInput SourceThis 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.
YesData Store
BasicInput ValueClick 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{{fx}}When Input Source = Data Store
BasicWrapAllows you to wrap the element around the contentNounmarked
BasicVisibleAllows you to define the default visibility of the UI element. Nomarked
BasicEnableAllows the user to enable/disable an element. You can decide whether the element needs to be clickable and usable.Nounmarked
BasicMandatoryAllows you to configure the element as a mandatory element.Nounmarked
BasicMessage on FailureThis 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. NoRequiredwhen mandatory = checked
BasicDefault ValueThis 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.
BasicParent Element IDIn 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 PropertiesStylesAllows 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 styles are:
–> Primary
–> Success
–> Secondary
NoPrimary
UI Properties- BackgroundColorSelect the color of the captionNoTheme Variable (Neutral)
UI Properties- BackgroundOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.Yes100%
UI Properties- BackgroundSelect ColorAllows a user to define the background color of the options after they are selectedNoTransparent
UI Properties- BackgroundOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.Yes100%
UI Properties- BackgroundUnselect ColorAllows a user to define the background color of the options after they are unselectedNoTransparent
UI Properties- BackgroundOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.Yes100%
UI Properties- Alignment & SpacingMarginAllows 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.NoTheme Variable (Margin)
UI Properties- Alignment & SpacingElement AlignmentClick this list to align the element as follows:-
–> Right
–> Top
–> Bottom
–> Top Right
–> Top Left
–> Bottom Right
–> Bottom Left
–> Center
NoLeft Top
UI Properties- CaptionFontSelect the Font of the captionNoTheme Variable (Font Family)
UI Properties- CaptionSizeSelect the Font size of the captionNo12
UI Properties- CaptionColorSelect the color of the captionNoTheme Variable (Caption)
UI Properties- CaptionBoldSelect the thickness of character of the captionNo4
UI Properties- Shape & DecorationTypeUnder 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 & DecorationWidth ValueEnter the width of the element in the percentage unit or pixel unit.No100%
UI Properties- Shape & DecorationHeight ValueEnter the height of the element in the pixel unit.NoSet as ___ & Disable
UI Properties- Shape & DecorationXAllows you to move the element along the X-axis; when the value increases, the element moves from left to right.NoShow & Disable
UI Properties- Shape & DecorationYAllows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.NoShow & Disable
UI Properties- Shape & DecorationBorder ColorAllows the user to define the color of the border of the checkboxNoTheme Variable (Border Color)
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparencyYes100%
UI Properties- Shape & DecorationSelect ColorAllows a user to define the background color of a checkbox, after a checkbox is selected by the application userNoTheme Variable (Primary)
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparencyYes100%
UI Properties- Shape & DecorationUnselect ColorAllows a user to define the background color of a checkbox, after a checkbox is unselected by the application userNo#161616
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparencyYes100%
UI Properties – OptionFontSelect the Font of the hint textNoTheme Variable (Font Family)
UI Properties-OptionSizeSelect the Font size of the hint textNo12
UI Properties-OptionColorSelect the color of the Option textNoTheme Variable (Caption)
UI Properties-OptionBoldSelect the thickness of character of the Option textNo4
UI Properties-OptionHide TextAllows the user to configure the option text as follows:

Yes:- The option text becomes unavailable.

No:- The option text becomes available.
Nounmarked
DataEntity PathThis 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.
NoEntityName.
Security PropertiesRegexAllows you to define the Regex (Regular Expression) based condition that replaces the real values from a specific character.No
Security Properties-BasicData MaskingThis 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
NoClear Check box
Security Properties-BasicMasking TypeClick 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.
NoFrom StartIf Data Masking check box is selected
Security Properties-BasicNThis 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.
NoIf Data Masking check box is selected
Security Properties-BasicMThis 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.
YesIf Masking Type = From Start & End
Security Properties-BasicMasking SymbolClick 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. +
NoIf Data Masking check box is selected

Event Configuration

On the “Check Box” element, you can configure the following event:

  • onSelect
Was this article helpful?
YesNo