QuickLinks

Overview

QuickLinks component is a contractual component that simplifies the navigation for a user by placing the frequently accessed features in a menu format. The QuickLinks component can display up to four links as icons in the menu. If there is a requirement to add more than four icons, the component provides the option to add a More link to the menu. When the More link is clicked or tapped, the QuickLinks component displays a child component (QuickActionsGrid component). The QuickActionsGrid component contains the extra links inside a BottomSheet component.

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

QuickLinks Contracts

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

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

Service Parameters

The QuickLinks component uses the Context variable to navigate to a different screen. By default, the QuickLinks component does not contain any value for the Service Parameter contract.

{}

Data Mapping

The Data Mapping property of the QuickLinks component maps the widget IDs with the data to be displayed. The data is mapped to the template widgets using the Context variable.

Supported Tokens:

• ${CNTX.linkName.linkProperty}: To map the value from the Context Variable.
• ${i18n{i18n.common.notes}}: To map the i18n key to the key.

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

{
	"quickLinks": {
		"lblQuickLink1": {
			"text": "Transfer Funds",
			"action": "transferFundsCTA",
			"entitlements": "[]",
			"notification": "",
			"icon": "\ue985"
		},
		"lblQuickLink2": {
			"text": "Pay a Person",
			"action": "payAPersonCTA",
			"entitlements": "[]",
			"notification": "",
			"icon": "\ue96e"
		},
		"lblQuickLink3": {
			"text": "Pay a Bill",
			"action": "payABillCTA",
			"entitlements": "[]",
			"notification": "",
			"icon": "\ue97c"
		},
		"lblQuickLink4": {
			"text": "Deposit Check",
			"action": "depositCheckCTA",
			"entitlements": "[]",
			"notification": "",
			"icon": "\ue920"
		}
	},
	"additionalLinks": {
		"lblQuickLink5": {
			"text": "Savings Pot",
			"action": "savingsPotCTA",
			"entitlements": "[]",
			"notification": "",
			"icon": "\ue962"
		},
		"lblQuickLink6": {
			"text": "Transfer Money",
			"action": "transferMoneyCTA",
			"entitlements": "[]",
			"notification": "",
			"icon": "\ue985"
		},
	},
	"theme": "dark",
	"linkMore": "${i18n{i18n.common.more}}",
	"iconMore": "\ue94e"
}

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 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 information about the error as well as where it had occurred.

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

setContext Method

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

this.view.quicklinks.setContext(contextData);

setEntitlements Method

This method is used to set the authorization required for each link in the component.

var entitlements = {
	"features": '["VIEW_COMBINED_STATEMENTS","VIEW_LOAN_SCHEDULE","VIEW_INSTALLMENT_SUMMARY"]', //cm.getUserFeatures(),
	"permissions": '["GOAL_POT_VIEW","BUDGET_POT_VIEW","VIEW_ESTATEMENTS"]' //cm.getUserPermissions()
};
this.view.quicklinks.setEntitlements(entitlements);

Context Object

The Context object is a JSON object containing the various details of the links required for the component.

The Context object in the Quicklinks component gets the following information about the links from the component consumer.

• text
• action
• entitlements
• notification
• icon
• theme

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

data.links = {
	link1: {
		"text": "Transfer Funds",
		"action": "handleCallToAction1",
		"entitlements": "['TEST_PERM']",
		"notification": "",
		"icon": "\ue985"
	},
	...
};
//theme "dark" - link text dark, icon font white, icon background dark
//theme "light" - link text dark, icon font dark, icon background white with shadow
//theme "lighter" - link text white, icon font dark, icon background white 
data.theme = "light";
handleCallToAction = function(btnText, action) {
	//write your code here.
};