Tile

Overview

The Tile component is a contractual component that displays the description and actions associated with transfers and beneficiaries. The Tile component contains the following features for customization.

• Header with a Header text and Header Icon
• A short description below the header.
• A link in the description to expand the short description.
• Links for various actions such as add a new beneficiary, make a new transfer, and activate P2P profile for the user.
• The display and execution of the actions depend on the entitlements set for the user.

NOTE: The Tile Component is used inside the Mobile Banking application.

Tile Component Contracts

The Tile component contains the following contracts for customizing the widgets in the Tile Component.

• Service Parameters
• Data Mapping
• Data Formatting
• Conditional Mapping Key
• Conditional Mapping
• onError Event
• hideTile Event
• enableHideDescription Event
• buttonActionHandling Event
• setContext Method
• closeDescription Method

Service Parameters

The Service Parameters contract is used to retrieve the response data required for the Tile Component. By default, the Tile component does not contain any value for the Service Parameter contract.

{}

Data Mapping

The Data Mapping property of the Tile component binds the data from the context variable with the widget IDs in the Tile component.

To map data with the widgets in the Data Mapping property, follow these formats.

• To map a plain string provide the text in the String format. For example, to map a text with lblTransactionType, follow this format.
  

  "lblTransactionType": "Within Same Bank"

• To map an i18n value, the i18n key value can be provided in a String format. In the following example, the lblTransactionTypeLabel is mapped with the i18n key for the particular transfer type.
  

  "lblTransactionType": "${i18n{i18n.common.sameBank}"

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

{
	"lblTransactionType": "Within Same Bank",
	"btnDescriptionActionBtn1": "Make Transfer",
	"btnDescriptionActionBtn2": "Add New Account",
	"btnAction1": {
		"text": "Transfer Now",
		"entitlements": [
			"INTRA_BANK_FUND_TRANSFER_CREATE",
			"TRANSFER_BETWEEN_OWN_ACCOUNT_CREATE"
		]
	},
	"btnAction2": {
		"text": "Add New Account",
		"entitlements": [
			"INTRA_BANK_FUND_TRANSFER_CREATE_RECEPIENT",
			"TRANSFER_BETWEEN_OWN_ACCOUNT_CREATE_RECEPIENT"
		]
	},
	"imgTransactionIcon": "domestic.png",
	"lblDescription": "Transfer between your own accounts or other accounts in the same bank",
	"MoreLink": "Learn More",
	"imgTransDescriptionIcon": "domestic.png",
	"transferType": "Within Same Bank"
}

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

Data Formatting

The Data Formatting property is used to provide a custom format for a specific requirement. By default, this component contains no value in this contract.

{}

Conditional Mapping Key

The Conditional Mapping Key is used to define mapping based on a criterion.

For example, if a label defined in the UI must display different data according to the type of account, a developer must set the Conditional Mapping Key property to the following value. By default, this component contains no value in this contract.

{}

Conditional Mapping

The Conditional Mapping property key is used to map a widget with a data from Collection Object or service response as per the Conditional Mapping key. By default, this component contains no value in this contract.

{}

onError event

The OnError event is invoked when an error occurs during the user journey. When the onError event is invoked, an error object is passed to the parent widget. This object contains the information about the error as well as where it had occurred.

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

hideTile Event

This event hides a particular tile based on entitlements provided to the buttons using the Data Mapping contract.

this.hideTile(); 

enableHideDescription Event

This event is triggered when the user wants to open or close the description page provided in the Tile Component. When the user clicks the hyperlink to display the description page, if the value provided in this event is true, the description page appears. The description page closes if the value provided in this event is false.

this.enableHideDescription(Visibility); 

buttonActionHandling Event

This event is triggered when any button on the tile is clicked or tapped.

this.buttonActionHandling(transferTypeDetails); 

setContext Method

This method is invoked inside the parent component or form controller. This method is used to pass the Context Data Object required for the Tile component.

this.view.tile.setContext(contextData);

closeDescription Method

This method is used to close the Tile description pop-up.

this.view.tile.closeDescription();

Context Object

The context object is a JSON object that is used as an input in the Tile component. The Context Object is used to pass data (such as entitlements) from the parent of the component to the Tile component.

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

var contextData = {
	"params": {
		"entitlements": {
			"features": [
				"TRANSFER_BETWEEN_OWN_ACCOUNT_CREATE_RECEPIENT",
				"INTRA_BANK_FUND_TRANSFER_CREATE",
				"TRANSFER_BETWEEN_OWN_ACCOUNT_CREATE",
				"INTRA_BANK_FUND_TRANSFER_CREATE_RECEPIENT"
			],
			"permissions": ""
		}
	}
};