OTP Field

OTP Field is a type of form item, specifically designed for capturing the one-time password, received through an SMS during the initiation of an online banking transaction through the modes of card payments and Internet Banking. The OTP can even be manually entered in this field.

By default, the OTP field form item allows only numbers as inputs.

Form Items >Data Entry>OTP Field.

To specify the number of digits in the OTP field, click Settings icon. The default number of digits is 4. However, you can specify the required number of digits for the OTP replacing the default value.
To enable the Timer for the OTP field, click the Timer On checkbox in Settings. The default value of the Timer Interval is 30. You can replace the default value and enter a value of your own choice. For instance, if you want to set the Timer Interval as 2 minutes, then type 120 in the Timer Interval field.
Note

The Timer Interval is denoted in seconds. It is mandatory for you to specify the Timer Interval in seconds.
To display the OTP timer in terms of minutes, select the Minutes option from the Timer in Units field. If you select the Seconds option, then the OTP timer will get displayed in terms of seconds.

On selecting the Minutes option from the Timer in Units field, the Timer gets displayed in minutes on the Form Designer, as shown in the following screen shot:

On selecting the Seconds option from the Timer in Units field, the Timer gets displayed in seconds on the Form Designer, as shown in the following screen shot:
If a sub-form is added dynamically, then Event Wiring cannot be used for such instances. For more information on sub-forms, refer Multi-Form vs. Sub-Form. To trigger the events of Timer Starts and Timer Ends, a simple Java listener class needs to be added to facilitate the process of triggering the events. The following code snippet serves as a sample reference:
```
canvas.form.listeners.AUDITFRM = Class(canvas.Observable, {
  constructor: function(config) {
    this.fm = config.fm;
  },
  registerHandlers: function() {
this.fm.registerHandler(CFEC.TIMER_STARTS, "OTP",function(fm) {
alert("Timer started");
});
this.fm.registerHandler(CFEC.TIMER_ENDS, "OTP",function(fm) {
alert("Timer Ended");
});
  }

});
CFLR.registerListener("OTP_FORM", canvas.form.listeners.AUDITFRM);
```
The following table provides information about the properties that are applicable to this form item:

#	Property	Description	Sample Value
1	Form ID	Unique ID of the Form on which you want to place the Form Item.	FORM_TRANSACTION
2	Item ID	Unique ID to the Form item. This value is automatically configured once the form is selected from the pop-up window.	OTP_FIELD20
3	Item Type	To identify the item type in a form.	OTP_FIELD
4	Channel	Assigns the form item compatibility for various devices	All Devices
5	Bundle Key	Name of the key associated with the property file which provides the localized label text for the current form item. Form item bundle key supersede the form level bundle key. If this value is blank, form level bundle key will be used to find label keys.	common
6	Plain Label	Text entered in Plain Label field appears as the label of the form item without the resource bundle key translation. 18.1: If you are using the property files, leave the Plain Label field as blank. See About Display Name Key and Plain Label till 18.1 for more details about this property and the related conditions. Display Name Key is the property-driven label key for the form item. See About Display Name Key and Plain Label till 18.1 for more details about this property and the related conditions. 19.1: In Canvas 19.1, the Display Name Key field is a configuration-driven label key for the form item. See About Display Name Key and Plain Label from 19.1 and Managing Display Names for Forms for more information.
7	Display Name Key		ENTER OTP
8	Edit	Selected: Renders the Form in edit enabled mode. De-Selected: Renders the Form in edit disabled mode.	Selected
9	Visibility	Selected: Shows the form item on the Form. De-Selected: Hides the form item from the form, but the data will still be in active.	Selected
10	Help	Selected: Renders the form item with a help icon. De-Selected: Renders the form item without a help icon. Refer the Configuring Help Messages and Tooltips for Form Items section for more information on configuring help text.	Selected
11	Print	Selected: Allows printing the form item while printing the form. De-Selected: Does not print the particular form item while printing the form.	50
12	Anchor	Defines the size of the form item in terms of percentage (without % symbol).	Selected
13	Column Span	Occupies the specified number of item spaces horizontally for the current item.	2
14	Label Alignment	Indicates the alignment of the labels of the form items. Select Options: Left ( ) or Top () or Inline ( )	Top
15	Hide Label	Selected: Hides the label of the form item. De-Selected: Shows the label of the form item.	De-Selected
16	Mandatory	Selected: Shows the red asterisk ({}{}) on the label of the form item, and converts the particular field as mandatory. De-Selected:* Considers the particular field as non-mandatory.	Selected
17	Conditional Mandatory	Selected: Shows the blue double asterisks ({}{}) on the label of the form item, and converts the particular field as conditional mandatory. Note: If selected, write the conditional logic in the CFEC.PRE_VALIDATE event. See Form Item Handlers for more information. De-Selected: considers the particular field as normal. If 'Mandatory' is already selected, do not select this property.	De-Selected
18	Add Icon	By making use of Add Icon option, you can add an icon to the form item. Perform the following steps for adding an icon to a form item: Click icon to add an icon to the field. By default, the Left option gets selected, which paves the way for the icon to get placed on the left side of the form item's label, whereas if the option Right is chosen, then the icon gets placed on the right side of the form item's label. Click icon to choose an icon for the form item. Icons and Custom are the two available tabs. From the list of icons in Font Awesome, you can choose an icon of your choice. Click Search text field and type the name of the icon, which you wish to choose. Default, Active, Disabled and Error are the four available options, categorized under the field, Choose icons for different state. You can assign separate icons for the four different states of Default, Active, Disabled and Error. Default indicates the default icon of the form item, whereas Active and Disabled depict the active and disabled states of the form item. When the selected form item is active, the chosen icon for Active state gets displayed and similarly, the icon, chosen for Disabled state, gets displayed, if the form item is in a disabled state. When an error occurs, the icon, which was selected for Error, gets displayed. To add a customized icon, click Custom tab. Click Browse Files button to select an image from your local drive. You can even drag and drop the customized image file directly, without any fuss. The customized image appears under the category of Custom Images. If you upload a customized icon for the form item, ensure that you restart the app server, after saving the form. Make sure to log out from Canvas Studio and close the Studio application, before restarting the app server. If you do not restart the app server, the uploaded custom icon will not appear as the assigned icon for the selected form item.	De-Selected
19	Multilingual input allowed	Selected: Supports the multilingual characters to be entered into the form items. De-Selected: Supports only the default language (English).	-
20	Minimum Input Size	Indicates the minimum number of characters within the text controls.	3
21	Maximum Input Size	Indicates the maximum number of characters within the text controls.	6
22	Validation Types	Indicates the configuration for validating the form item inputs. You can assign any of the following validation types for the form item, depending upon its context. (Numeric) - Accepts numbers only as inputs. (Alphanumeric) - Accepts alphabets and numbers as inputs, but no special characters. (No validation) - Accepts all sets of characters as inputs. (Custom Validation) - Accepts inputs as configured in the custom validation type. For a list of pre-defined validation types and to create new custom validation types, refer Registering Custom Validation Types in Canvas.	Numeric
23	Switch	Enables you to switch from one form item to another form item along with the applicable properties and their values. To switch from one form item to another form item, execute the steps that follow: Select the form item in the form designer area. Click the Switch icon ( ) on the primary ribbon. Select another form item to switch the existing form item.	NA
24	Clone	Enables you to create a duplicate of the selected form item along with its applicable properties except for the Item ID.	2
25	Event Wiring	The Event Wiring option enables you to assign various events for different set of actions. For detailed information on Event Wiring, refer Form Items Event Wiring.

You can also add validation icons to the OTP field based on status such as focus, valid and invalid by performing the following additional step:

showStateIconAtIndividualInput: true;
/* This code can be used in any listener file, not necessarily form's listener file. 
However, once this code is implemented, it will reflect globally at the application level. 
*/

If the OTP field is on focus, a blue tick symbol will appear. If the provided value is valid, a green tick symbol appears and if the OTP is invalid, a red warning symbol will be displayed on the field.