Slate

Overview

The Slate component is used to list details of Accounts, Transactions, and Beneficiaries, in a key-value format. The data required for the Slate component is retrieved from the service response or from the Context variable. The key is usually displayed as a text, while the data from the service response is used as the value. The key supports all data types including Alpha-numeric or Numeric. The Slate component provides the following UI formats while displaying the data.

• The Slate with a header and a logo.
• The Slate with a header.
• The Slate without header.
• The Slate with a navigation link and a disclaimer.

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

Slate Contracts

The Slate component contains the following contracts for customizing the template widgets and navigation.

• Service Parameters
• Data Mapping
• Data Formatting
• Conditional Mapping Key
• Conditional Mapping
• Slate
• onError Event
• onViewAll Event
• setContext Method

Service Parameters

The Service Parameters contract of the Slate Component helps to set the service details required to retrieve the response data. In the Slate Component, the Service Parameter contract retrieves the response and stores it in a Collection object (such as Collection.SlateServiceObject Object). This Collection Object can then be used to set the response in all the other contracts.

Here is a sample of the JSON object provided in the Service Parameter of the Slate Component using the SlateServiceObject Object.

{
	"SlateServiceObject": {
		"ServiceType": "",
		"Service": "",
		"Object": "",
		"Verb": "",
		"Criteria": {}
	}
}

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

Data Mapping

The Data Mapping contract of the Slate Component maps the widget IDs with the data to be displayed. The data is retrieved from Context Data Object or Service response. The Data Mapping contract in the Slate component supports the following tokens to be provided as value.

• ${Collection.SlateServiceObject}: Maps the value stored in the Collection Object.
• ${CNTX.SlateContextObject} : Maps the value from Context variable.
• ${i18n{i18n.common.notes}}: Maps the i18n key.

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

{
	"segmentMasterData": "${CNTX.SlateContextObject}",
	"segments": {
		"headerData": {
			"lblAccount": "${segmentMasterData.accountName}",
			"rtxAmount": "${segmentMasterData.formattedBalance}",
			"lblAccountDesc": "Available Balance",
			"imgIcon": {
				"accountType": {
					"Checking": "acme.png",
					"Saving": "header_logo.png"
				}
			}
		},
		"headerCTAIdentifier": {
			"onViewAll": "lblAccount"
		},
		"rowData": {
			"${i18n{i18n.common.to}}": "${segmentMasterData.maskedAccountId}",
			"${i18n{i18n.common.transactionFee}}": "${segmentMasterData.pendingDeposit}",
			"${i18n{i18n.common.transferCharge}}": "${segmentMasterData.pendingWithdrawal}",
			"${i18n{i18n.common.notes}}": "${segmentMasterData.jointHolders[0].fullname}",
			"${i18n{i18n.common.exchangeRate}}": "${segmentMasterData.address}"
		},
		"information": {
			"${i18n{i18n.common.exchangeRate}}": {
				"title": "Time-Weighted Return",
				"description": "Return calculation eliminates the effects on growth rates created by any inflows or outflows of cash. The time-weighted return breaks up the return into separate intervals based on whether cash was added or withdrawn.",
				"closeBtnText": "Close"
			}
		},
		"rowExpand": {
			"ShowMore": "Show More",
			"ShowLess": "Show Less",
			"minimumRecords": "2"
		},
		"valuelevelicon": {
			"${i18n{i18n.common.to}}": {
				"text": "\ue945",
				"onTouchend": "Masking"
			}
		}
	},
	"notesSection": {
		"lblNotes": "Notes",
		"noteMsg": "Message to be displayed"
	}
}

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

Data Formatting

Data formatting contract is used to add a new formatting type or override existing formatting type in the default format JSON. In the Slate component, the ACCOUNT_NUMBER format has been added for account number masking and unmasking.

As per the sample code given below, the ACCOUNT_NUMBER format applies masking to four characters from front and displays the rest of the number.

{
	"ACCOUNT_NUMBER": {
		"BusinessRuleType": "FORMAT_ACCOUNT",
		"BusinessRule": {
			"maskingCharacter": "X",
			"numberOfCharacters": 4,
			"maskingFromFront": "yes"
		}
	}
}

Conditional Mapping Key

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

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.

{}

Slate

The Slate section is specific to Slate component. It contains the following contracts.

• Append Operation
• Header Template Config
• Dynamic Formatting

Append Operation

This contract is used to combine values from different fields and display it as one.

For example, consider a scenario where the values provided in the addressLine1 and addressLine2 fields from the Context variable has to be displayed in the address field. To achieve this scenario, a developer can assign the values in addressLine1 and addressLine2 to the input1 and input2 keys in the Append Operation contract. The values in input1 and input2 keys are then concatenated using the character provided in the appendDelimiter key and then assigned to the address field in the output key.

The Append Operation contract can accept multiple inputs if required and store the result in a field as per the output key.

{
	"segmentMasterData": "${CNTX.SlateContextObject}",
	"operations": {
		"operation1": {
			"input1": "${segmentMasterData.AccountName}",
			"input2": "${segmentMasterData.accountType}",
			"output": "${segmentMasterData.address}",
			"appendDelimiter": ","
		}
	}
}

Header Template Config

Assigns the template ID to the header template of the Segment widget. If this field is empty, then the segment header is not displayed. 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: flxSlateTemp1, where flxSlateTemp1 is the header template ID.
• JSON Format: This format is used to support the 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": "flxSlateTemp1",
  "microAppName": "ResourcesMA"
}

Dynamic Formatting

The Dynamic Formatting contract is responsible for mapping the fields in the Collection object or Context variable to the formatted data according to their format types.

{
	"segmentMasterData": "${CNTX.SlateContextObject}",
	"formattingField": {
		"ACCOUNT_NUMBER": {
			"${segmentMasterData.accountID}": "${segmentMasterData.maskedAccountId}"
		},
		"AMOUNT_WITH_SUP": {
			"${segmentMasterData.currentBalance}": "${segmentMasterData.formattedBalance}"
		}
	}
}

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);

onViewAll Event

The Slate component provides the View All icon that is to be clicked or tapped to make the detailed view appear. When the user clicks the View All icon, the onViewAll event is triggered as the View All icon is mapped to the onViewAll event using the headerCTAIdentifier in the Data Mapping contract. onViewAll event is a static event exposed by the component. The definition for this event is to be written at the component consumer level (such as the Form controller).

this.handCallToAction(data);

setContext Method

This method is invoked inside the parent component or form controller. Using this method, a developer can pass the data required for the component from the parent of the component.

this.view.slate.setContext(contextData);

Context Object

The Context Object is a JSON object that is used as an input from the parent of the component (such as the Form controller) to the Slate component.

The Slate component uses the following account related data from the Context Object.

• AccountName
• Account_id
• IBAN
• accountHolder
• accountID
• accountName
• accountType

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

var context = {
	"AccountName": "dfsdfdg",
	"Account_id": "120103",
	"IBAN": "GB35DEMO60161300120103",
	"accountHolder": "{\"username\":\"dfsdfdg\",\"fullname\":\"dfsdfdg\"}",
	"accountID": "120103",
	"accountName": "Checking Account",
	"accountType": "Checking"
};