Email Address

Overview

The Email Address is a component contains input fields to enter and validate email address. The Infinity application uses the Email Address component throughout for various functionality flows such as Same Bank Transfer, Domestic Transfer, International Transfer, P2P, and Forgot Password.

The Email Address 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 email address.
  • Performs a set of configurable validations automatically.

NOTE: The Email Address component is used inside the Mobile Banking application.

Email Address Contracts

The Email Address component provides the contracts given below.

Service Parameters

The Service Parameters contract sets the service details required to configure the APIs needed for a component. The Email Address component, by default, does not use the service response.

Here is a sample of the JSON object provided in the Service Parameter of the Email Address component.

{}

Data Mapping

The Data Mapping contract of the Email Address component maps the widget IDs with the data to be displayed. The component retrieves the data for mapping from Context Data Object.

Here is a sample of the JSON object provided in the Data Mapping contract of the Email Address component.

{
	"emailField": {
		"emailValue": "${CNTX.records.Value}",
		"isPrimaryEmail": "${CNTX.records.isPrimary}"
	},
	"enterEmailPlaceholder": {
		"placeholder": "${i18n{i18n.common.enterEmailAddressWithColon}}"
	},
	"emailSelectionPlaceholder": {
		"multiEmailTitle": "${i18n{i18n.payments.emailAddressWithColon}}"
	},
	"errorMessage": {
		"mandatoryErrorMsg": "${i18n{i18n.common.mandatoryEmailAddressField}}",
		"invalidEmailErrorMsg": "${i18n{i18n.common.enterValidEmailAddress}}",
		"contactsPermissionErrorMsg": "${i18n{i18n.common.permissionForContacts}}",
		"maxLengthErrorMsg": "${i18n{i18n.common.emailLimitExceeded}}"
	},
	"maxTextLength": 256,
	"isMandatoryField": false
}

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

Key Description
emailField
  • Maps the Context Data Object to the component.
  • This key accepts a JSON object with the following keys.
    • emailValue: The Context Data object mapped to the Email input field.
    • isPrimaryEmail: Sets if the user-entered email is primary or secondary.
enterEmailPlaceholder
  • Sets the filler text that appears in the Email input field.
  • Accepts value in the form of i18n keys and String.
emailSelectionPlaceholder
  • Sets the filler text that appears while selecting multiple Emails.
  • Accepts value in the form of i18n keys and String.
errorMessage
  • Sets the static text that appears when an error occurs in the component.
  • This key accepts a JSON object with the following keys.
    • mandatoryErrorMsg: The error message that appears when the user does not enter the mandatory email in the component.
    • invalidEmailErrorMsg: The error message when the user enters an invalid email.
    • contactsPermissionErrorMsg: The error message that appears when the component cannot access the contacts in the mobile device.
    • maxLengthErrorMsg: Sets the maximum length of the error messages in the component.
maxTextLength
  • Limits the length of the user-entered text.
  • Accepts value in Integer format.
isMandatoryField
  • When the value of this field is true, the input field becomes mandatory.
  • Accepts a Boolean value.

Data Formatting

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

{}

Conditional Mapping Key

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

The Email Address 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 as per the Conditional Mapping key.

The Email Address component does not contain any value for this key by default.

{}

Email Address

The Email Address group contains the following contracts.

Read Only

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

Parameter Value

Programmatic Name

readOnly

Default Value

true/false

Type

Boolean

Choose From Contacts Visibility

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

Parameter Value

Programmatic Name

chooseFromContactsVisibility

Default Value

true/false

Type

Boolean

Email ID Dropdown

The Email Id Dropdown group contains contracts that set the UI for the Email drop-down list.

When the Read Only contract value is false, the Infinity application in Quantum Visualizer does not display the Email Id Dropdown group. The Email Id Dropdown group contains the following contracts.

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: flxTempEmailAddress2, where flxTempEmailAddress2 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.
Parameter Value

Syntax

This parameter accepts the row template ID as a String or a JSON object containing the following keys.

  • templateID: Sets the row template ID as a String.
  • microAppName: Sets the name of the Microapp containing the template.
Programmatic Name rowTemplateConfig

Default Value 

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

Type

String/JSON

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: flxTempEmailAddress1, where flxTempEmailAddress1 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.
Parameter Value

Syntax

This parameter accepts the row template ID as a String or a JSON object containing the following keys.

  • templateID: Sets the row template ID as a String.
  • microAppName: Sets the name of the Microapp containing the template.
Programmatic Name selectedRowTemplateConfig

Default Value 

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

Type

String/JSON

Widget Map

This field maps the user-selected email address with the static labels of the component. These labels do not appear if the value of the Read Only contract is false.

Parameter Value

Syntax

JSON object containing the following keys.

  • widgetMapping: Maps the widgets of the selected row template. This key accepts a JSON object with the following keys.
    • emailType: Maps if the email address is primary or secondary.
    • emailValue: Maps the user-entered email address.
  • dropdown: Provides values for header and title during Email selection.
    • header: Sets the header of the email selection drop-down.
    • title: Sets the header for the selected email in the drop-down.
    • enableModalContainer: Enables or disables pop-up acknowledgment activity when the user clicks the background of the pop-up.
Programmatic Name selectedRowTemplateConfig

Default Value 

{
	"widgetMapping": {
		"emailType": "lblHeader",
		"emailValue": "lblData"
	},
	"dropdown": {
		"header": "${i18n{i18n.common.selectEmailAddress}}",
		"title": "${i18n{i18n.common.selectPreferredEmailAddress}}",
		"enableModalContainer": false
	}
}

Type

JSON

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.

When the Read Only contract value is true, the Infinity application in Quantum Visualizer does not display the Popup group. The Popup group contains the following contracts.

Dynamic Skins

The Dynamic Skin contract overrides the existing applied skin.

Parameter Value

Syntax

JSON format with fields parameter as key and the component level widget skins in the following format.

{
	<widgetID1>: <skinName1>,
 	<widgetID2>: <skinName2>
}
Programmatic Name dynamicSkins

Default Value 

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

	}
}

Type

JSON

Popup Data Mapping

This field maps the data that appears in the Pop-up Acknowledgment component used inside the Email Address component.

Parameter Value

Syntax

JSON format with popupAck parameter as key and JSON format with the following keys as value.

  • ack: Maps the image that appears in the component.
  • close: Maps the image that the user clicks to close the component.
  • title: Sets the heading of the component as an i18n key or in a String format.
  • primary: Sets the text inside the component as an i18n key or in a String format.
  • enableModalContainer: Enables or disables pop-up acknowledgment activity when the user clicks the background of the pop-up.
Programmatic Name popupDataMapping

Default Value 

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

Type

JSON

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.

Parameter Value
Input parameter JSON object

Object Description

The JSON object contains the following keys:

  • level: This key contains the String value regarding where the error occurs. It can be from the component View controller or the component Business controller.
  • method: This key contains the function that handles the error.
  • error: This key contains the actual error message and the stack.

Sample Input 

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

onEmailIdEntered Event

This event is triggered when the user enters valid data in the input field.

Parameter Value
Input parameter

data: The user-entered information in the input field in a String format.
Programmatic Name onEmailIdEntered

Sample Code 

this.onEmailIdEntered(data);

Return Type

None

handlePopupCallToAction Event

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

Parameter Value
Input parameter

componentScope: The information associated with the scope of the component in a JSON format.
Programmatic Name handlePopupCallToAction

Sample Code 

this.handlePopupCallToAction(componentScope);

Return Type

None

handleTitleBar Event

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

Parameter Value
Input parameter

componentScope: The information associated with the scope of the component in a JSON format.
Programmatic Name handleTitleBar

Sample Code 

this.handleTitleBar(componentScope);

Return Type

None

setContext Method

This method is 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.

Parameter Value

Syntax

this.view.componentID.setContext(contextData);

Input parameter JSON object containing the context variable. For more information on the context object, click here.

Sample Input 

this.view.emailaddress.setContext(contextData);

Return Type

None

setConfigsFromParent Method

This method sets the configurations from the parent component to the Email Address component when the Email Address component is placed inside another component.

Parameter Value

Syntax

this.view.<componentID>.setConfigsFromParent(configParams);

Input parameter

configParams: Sets the JSON object required for the child component. The JSON object can contain all the contracts used in the Email Address component as keys.

  • serviceParameters: JSON object containing the Service configurations.
  • dataMapping: JSON object containing the data mapped with the widget.
  • dataFormatting: JSON object containing the look and feel of the data.

Sample Input 

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

Return Type

None

Context Object

A context object is a JSON object used to pass the data required for the component. The context variable helps the component get the data using the following parameters.

  • Type_id
  • Value
  • id
  • isPrimary

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

var contextData = {
	"records": [{
			"Type_id": "COMM_TYPE_EMAIL",
			"Value": "retail@temenos.com",
			"id": "1",
			"isPrimary": "false"
		},
		{
			"Type_id": "COMM_TYPE_EMAIL",
			"Value": "test@temenos.com",
			"id": "2",
			"isPrimary": "true"
		}
	]
};

 

Expand/Collapse
Share
Print

In this topic

Copyright © 2020- Temenos Headquarters SA

Published on :
Monday, May 2, 2022 5:08:52 PM IST

Feedback
x