OTP (One-time-password)

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

The OTP element verifies the mobile number of users by sending a unique verification code (OTP) during registration or transaction processing. It removes the possibility of a user registering with a fake mobile number. This module checks the existence of the mobile number and the ability of a user to access that mobile number.

Usage

When to use
A business that deals with sensitive customer information can make use of our OTP services. Some examples of the sectors that use OTP services are banking, healthcare, e-commerce, insurance, transport, etc.

OTP Configuration

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

  • UI Configuration
  • Event Configuration

UI Configuration

For the “OTP” element, you can configure the following UI properties:

TabProperty NameDescriptionMandatoryNew Default ValueVisibility Rules
BasicReference NameSpecifies a unique name of the element. At the application level, an element is identified and managed by the reference name.YesOTP_1
BasicCaptionSpecifies the title of the element.NoOTP
BasicOTP LengthIn this box, enter the maximum number of characters (For example: – 6) that the user can enter in the OTP element.Yes5
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.
No{{fx}}
BasicMaskThis property allows you to mask OTP.Nomarked
BasicVisibleAllows you to define the default visibility of the UI element. Nomarked
BasicBusiness RuleClick 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
BasicEnableAllows the user to enable/disable an element. You can decide whether the element needs to be clickable and usable.Nomarked
BasicBusiness RuleClick 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
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
BasicEnable Active FillIt activates the function that you can use to fill the active color in the OTP element.NoSelected
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.NoDefault
UI Properties-
Background
ColorClick the leftmost box and then define the color of the element?s background.NoTheme Variable (Neutral)
UI Properties-
Background
OpacityOpacity 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.
No100%
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’s AlignmentThis 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.
NoLeft
UI Properties- CaptionFontSelect the font type (For example: – Arial) of the element?s caption.NoTheme Variable (Font Family)
UI Properties- CaptionSizeEnter the font size of the caption.No12
UI Properties- CaptionColorSelect the color of the font of the caption.NoTheme Variable (Caption)
UI Properties- CaptionBoldEnter the thickness of the character of the element?s caption in the range of values from 1 to 9.No4
UI Properties- CaptionStyleSelect the style of font (For example:- Italic) of the captionNoNormal
UI Properties- InputFontSelect the font of the value that you enter in the element. NoTheme Variable (Font Family)
UI Properties- InputSizeEnter the size of the font of the input text.No14
UI Properties- InputColorClick the Color box and then select the color of the font of the input value.NoTheme Variable (Answer Text)
UI Properties- InputBoldEnter the size of the ?Bold? emphasis if you want to display the input text in Bold style.No4
UI Properties- InputStyleClick this list and then select any of the following styles to display the input text:
–> Normal
–> Italic
NoNormal
UI Properties- Shape & DecorationTypeUnder 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.
UI Properties- Shape & DecorationWidth ValueEnter the width of the element in the pixel unit or percentage 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 & DecorationInprogress Border ColorThis property allows you to define the element’s border color that the element displays when the user enters the OTP in the element.No#C6C6C6
UI Properties- Shape & DecorationSelect Border ColorThis property allows you to define the element’s border color that the element displays when the user selects the element but does not enter a value in it.No#0F61FE
UI Properties- Shape & DecorationUnselect Border ColorThis property allows you to define the element’s border color that the element displays when the user does not select the element to enter a value.No#C6C6C6
UI Properties- Shape & DecorationOpacityOpacity 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.
No100%
UI Properties- Shape & DecorationUnselect ColorClick the Color box and then define the color that the OTP element displays when the user does not select it to enter the value of the OTP.No
UI Properties- Shape & DecorationOpacityOpacity 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.
No100%
UI Properties-TooltipShow Tooltip Click this check box to make a tooltip available with the element.NoClear Check box
UI Properties-TooltipMessageThis 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-TooltipColorThis 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#6F6F6FWhen the Show Tooltip check box is selected
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.
DataKeyboard TypeClick this list and then select any of the following values:
–> Text: – Selecting this value enables the application to open text-based keyboard.

–> Number: – Selecting this value enables the application to open number-based keyboard.
NoNumber
DataSubmission TypeThis property allows you to define the cursor position after the end-user enters the one time password in the OTP box.NoNext Focus

Event Configuration

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

  • onCompletion

Was this article helpful?
YesNo