Phone Number

Overview

The Phone Number component provides UI to select the Country code and enter the user's phone number. The component also validates the user's phone number as per requirement. The Infinity application uses the Phone Number component throughout for various functionality flows such as Same Bank Transfer, Domestic Transfer, International Transfer, P2P, and Forgot Password.

The Phone Number component provides the following customizations for a developer.

• Make the field Mandatory or Optional.
• Provide the Choose from Contacts feature.
• Provides a drop-down list to select the phone number.

The Phone Number component contains Dropdown component and Bottomsheet component as child components.

NOTE: The Phone Number component is used inside the Mobile Banking application.

Phone Number Contracts

The Phone Number component provides the contracts given below.

• Service Parameters
• Data Mapping
• Data Formatting
• Conditional Mapping Key
• Conditional Mapping
• Phone Number
• Multi Phone Number
• Country Code Dropdown
• Permission Deny Popup
• onError Event
• onPhoneNumberEntered Event
• handlePopupCallToAction Event
• handleTitleBar Event
• handleCallToAction Event
• setContext Method
• setConfigsFromParent Method

Service Parameters

The Service Parameters contract of the Phone Number component sets the service details required to retrieve all the Country Codes to populate the drop-down list. In the Phone Number component, the Service Parameter contract uses the DropdownServiceObject Object to retrieve the data for the drop-down list.

Here is a sample of the JSON object provided in the Service Parameter of the Phone Number component.

{
	"DropdownServiceObject": {
		"ServiceType": "customVerb",
		"Service": "CountryService",
		"Object": "Country",
		"Verb": "getAllCountries",
		"Criteria": {}
	}
}

The Service Parameter contract provides the following key-value pairs for customization.

Data Mapping

The Data Mapping contract of the Phone Number component maps the widget IDs with the data to be displayed. The component retrieves the data for mapping from Context Data Object or Service response.

Here is a sample of the JSON object provided in the Data Mapping of the Phone Number component.

{
	"editablePhoneNumberField": {
		"placeholder": "${i18n{i18n.common.enterPhoneNumber}}",
		"maxTextLength": "10",
		"textInputMode": "numeric",
		"keyboardActionLabel": "0"
	},
	"countryCodeDropdown": {
		"phoneTitle": "${i18n{i18n.common.phoneNumberWithColon}}",
		"primaryTitle": "${i18n{i18n.common.primaryPhoneNumber}}",
		"alternavtiveTitle": "${i18n{i18n.common.alternativePhoneNumber}}"
	},
	"phoneNumberField": {
		"multiPhoneNumberContext": "${CNTX.records}",
		"phoneNumberValue": "${CNTX.records.Value}"
	},
	"errorMessage": {
		"mandatoryErrorMsg": "${i18n{i18n.common.mandatoryPhoneNumber}}",
		"invalidPhoneErrorMsg": "${i18n{i18n.common.validPhoneNumber}}",
		"contactsPermissionErrorMsg": "${i18n{i18n.common.permissionForContacts}}",
		"countryCodeErrorMsg": "${i18n{i18n.common.validCountryCode}}"
	},
	"countryCodeSelectedValue": "${Collection.DropdownServiceObject.phoneCountryCode} + /s + ( + ${Collection.DropdownServiceObject.Code} + )",
	"isMandatoryField": false
}

The Data Mapping contract is assigned a JSON object with the following key-value pairs.

Data Formatting

Data formatting property adds a new formatting type or overrides the existing formatting type in the default format JSON.

{}

Conditional Mapping Key

The Conditional Mapping Key is used to define mapping based on a criterion. The property specifies the value on which the conditional data mapping check should happen.

The Phone Number component does not contain any value for this key by default.

{}

Conditional Mapping

The Conditional Mapping property key maps a widget with data from the Collection Object or service response as per the Conditional Mapping key.

By default, the Phone Number component does not contain any customization for this key.

{}

Phone Number

The Phone Number group contains the following contracts.

• Read Only Contacts
• Choose From Contacts
• Country Selected Config
• Phone Number Selected Config

Read Only Contacts

This field specifies if the user-entered Phone Number should be read-only or editable. If the value of this contract is true, the field appears as read-only.

Choose From Contacts

This field specifies if the user can choose the Phone Number using the Contacts button. If the value of this contract is true, the Contacts button appears in the component.

Country Selected Config

This field specifies the format in which the Country Code appears in the drop-down list as per the response.

${dropdownSegmentData.lblCountryCodeOrCurrency}

Phone Number Selected Config

This field formats the value user selects from the Multi Phone Number drop-down.

${sortSegmentData.phoneNumber}

Multi Phone Number

The Multi Phone Number group contains the following contracts.

• Phone Number Data Mapping
• Row Template Config
• Selected Row Template Config
• Default Selected Key

Phone Number Data Mapping

This field maps the value that the user selects from the Multi Phone Number drop-down with the Context data object.

{
	"fields": {
		"lblHeader": "${i18n{i18n.common.phoneNumber}}",
		"lblTitle": "${i18n{i18n.common.phoneNumberMsgInfo}}"
	},
	"segments": {
		"segOptions": {
			"segmentMasterData": "${CNTX.Options}",
			"segmentUI": {
				"lblOption": "${segmentMasterData.type}",
				"lblValue": "${segmentMasterData.phoneNumber}"
			}
		}
	}
}

Row Template Config

The Row Template contract sets the Segment row template for the drop-down lists in the component.

A developer can set the value for this contract in two formats.

• String Format: The dynamic row template ID is provided in a String format. For example: flxTempPhoneNumber2, where flxTempPhoneNumber2 is the row template ID.
• JSON Format: This format supports inter-app access while using composite apps. In this format, the developer must provide both the Microapp Name and the template ID as a JSON object.

{
	"templateID": "flxTempPhoneNumber2",
	"microAppName": "ResourcesMA"
}

Selected Row Template Config

The Selected Row Template contract sets the Segment row template for the row selected by the user.

A developer can set the value for this contract in two formats.

• String Format: The dynamic row template ID is provided in a String format. For example: flxTempPhoneNumber1, where flxTempPhoneNumber1 is the row template ID.
• JSON Format: This format supports inter-app access while using composite apps. In this format, the developer must provide both the Microapp Name and the template ID as a JSON object.

{
	"templateID": "flxTempPhoneNumber1",
	"microAppName": "ResourcesMA"
}

Default Selected Key

This field configures the default key in the drop-down list.

${CNTX.defaultOption}

Country Code Dropdown

The Country Code Dropdown group contains the contracts given below to customize the dropdown list containing the Country Codes.

• Country Code Data Mapping
• Dropdown Row Template Config
• Dropdown Selected Row Template Config
• Header Template Config
• Default Selection Config

Country Code Data Mapping

This field maps the value that the user selects from the Country Code drop-down list with the Context data object.

{
	"mainHeaderTitle": {
		"lblDropdownHeaderTitle": "${i18n{i18n.common.countryCode}}"
	},
	"segDropdown": {
		"segmentMasterData": "${CNTX}",
		"segmentUI": {
			"sectionHeader": [{
				"lblDropdownSectionTitle": "${i18n{i18n.common.selectCountryCode}}"
			}],
			"segmentRowData": {
				"countryId": "${segmentMasterData.Code}",
				"lblCountry": "${segmentMasterData.Name}",
				"imgFlag": "",
				"lblCountryCodeOrCurrency": "${segmentMasterData.Code} + /s + ( + ${segmentMasterData.phoneCountryCode} + )",
				"countryOrCurrencyCode": "${segmentMasterData.Code} + /s + ( + ${segmentMasterData.phoneCountryCode} + )"
			}
		}
	}
}

Dropdown Row Template Config

This contract assigns the row template ID for the segment widget.

The Row Template contract sets the Segment row template for the drop-down lists in the component.

A developer can set the value for this contract in two formats.

• String Format: The dynamic row template ID is provided in a String format. For example: flxTempDropdown3, where flxTempDropdown3 is the row template ID.
• JSON Format: This format supports inter-app access while using composite apps. In this format, the developer must provide both the Microapp Name and the template ID as a JSON object.

{
	"templateID": "flxTempDropdown3",
	"microAppName": "ResourcesMA"
}

Dropdown Selected Row Template Config

The Selected Row Template contract sets the Segment row template for the row selected by the user.

A developer can set the value for this contract in two formats.

• String Format: The dynamic row template ID is provided in a String format. For example: flxTempDropdown4, where flxTempDropdown4 is the row template ID.
• JSON Format: This format supports inter-app access while using composite apps. In this format, the developer must provide both the Microapp Name and the template ID as a JSON object.

{
	"templateID": "flxTempDropdown4",
	"microAppName": "ResourcesMA"
}

Header Template Config

The Header Template contract sets the Segment Section Header template for the drop-down lists in the component.

A developer can set the value for this contract in two formats.

• String Format: The dynamic row template ID is provided in a String format. For example: flxTempDropdown1, where flxTempDropdown1 is the row template ID.
• JSON Format: This format supports inter-app access while using composite apps. In this format, the developer must provide both the Microapp Name and the template ID as a JSON object.

{
	"templateID": "flxTempDropdown1",
	"microAppName": "ResourcesMA"
}

Default Selection Config

The Component consumer uses this contract to select a row by default (before user selection) by providing key-value pair.

{
	"key": "countryId",
	"value": "US"
}

Permission Deny Popup

The Email Address component uses the Pop-up Acknowledgment component as a child component. The Popup group in the Email Address component provides fields to customize this child component. It contains the following contracts.

• Dynamic Skins
• Popup Context

Dynamic Skins

Dynamic Skin contract overrides the existing applied skin.

{
	<widgetID1>: <skinName1>,
 	<widgetID2>: <skinName2>
}

{
	"fields": {
		"lblTitle": "lblGrey500FS40Emp",
		"lblDescription1": "lblGrey400FS20",
		"lblDescription2": "lblGrey400FS20",
		"btnPrimary": "btnPrimary",
		"btnSecondary": "btnSecondary"
	}
}

Popup Context

This contract maps the widgets in the Pop-Up Acknowledgment child component with the data.

{
	"popupAck": {
		"ack": "alert.png",
		"close": "",
		"title": "${i18n{i18n.common.permissionForContacts}}",
		"primary": "${i18n{i18n.common.close}}",
		"enableModalContainer": false
	}
}

onError Event

The OnError event handles any error that occurs during the user journey. The onError passes an error object to the parent widget containing the information about the error and where it had happened.

var errordata = {
	"level": "ComponentViewController",
	"method": "setWidgetTemplate",
	"error": err
};
this.onError(errordata);

onPhoneNumberEntered Event

This event provides the user-entered data to the component consumer.

this.onPhoneNumberEntered(data);

handlePopupCallToAction Event

This event is triggered when the user clicks any button inside the Pop-up Acknowledgment child component.

this.handlePopupCallToAction(componentScope);

handleTitleBar Event

This event updates the native title bar attributes based on the pop-up visibility.

this.handleTitleBar(componentScope);

setContext Method

This method must be invoked inside the parent component or form controller. This method passes a text used to the input box in place of the entry in the input box.

this.view.phonenumber.setContext(contextData);

setConfigsFromParent Method

This method sets the configurations from the parent component to the Phone Number component when the Phone Number component is placed inside another component.

var configParams ={
	"serviceParameters": "this._ServiceParameters",
	"dataMapping": "this._DataMapping",
	"dataFormatting": "this._DataFormatting"
}
this.view.phonenumber.setConfigsFromParent(configParams);

Context Object

A context object is a JSON object that passes the data required for the component. The context variable helps the component get the data using the following parameters.

• Type_id
• Value
• id
• isPrimary
• phoneCountryCode
• phoneNumber

Here is a sample of the Context JSON Object used inside the component.

var contextData = {
	"records": [{
			"Type_id": "COMM_TYPE_PHONE",
			"Value": "9292929394",
			"id": "1",
			"isPrimary": "true",
			"phoneCountryCode": "+91",
			"phoneNumber": "9292929394"
		},
		{
			"Type_id": "COMM_TYPE_PHONE",
			"Value": "9999999999",
			"id": "1",
			"isPrimary": "false",
			"phoneCountryCode": "+91",
			"phoneNumber": "9999999999"
		}
	]
};