Footer Menu

Overview

The Footer Menu is a component that displays the App menu items at the bottom of all the screens. The Footer Menu component provides various options to view the user account details, transaction details, and card details. The Footer menu also provides the user a quick way to perform multiple actions such as payments and transfers.

The Footer menu contains three configurable menu links and one menu option. These menu links help the user to navigate to other features and screens. However, the first menu link always navigates to the Overview or Dashboard screen by default. The menu option displays a list of features within the app. This option also shows a red dot if there are any new or unread user notifications.

The Footer Menu component uses the Footer Menu Utility file from the modules/require folder to configure the dynamic App Menu items. This file configures the Text and Menu item info properties of the Container of the Footer Menu at the application level. For more information on the Footer Menu Utility and how to use it, refer to the document for Footer Menu Utility.

NOTE: The Footer Menu component is used inside the Mobile Banking application.

Footer Menu Contracts

The Footer Menu component provides the contracts given below.

• Service Parameters
• Data Mapping
• Data Formatting
• Conditional Mapping Key
• Conditional Mapping
• Footer Menu
• onError Event
• handleCallToAction Event
• setContext Method

Service Parameters

A component'sService Parameters contract contract helps set the service details required to configure the necessary APIs.

Here is a sample of the JSON object provided in the Service Parameter of the Footer Menu component.

{ }

Data Mapping

The Data Mapping contract of the Footer Menu component maps the widget IDs with the data to be displayed. The data in this component only maps to a Context Data Object.

Here is a sample of the JSON object provided in the Data Mapping of the Footer Menu component.

{
	"defaultMenus": "${CNTX.defaultMenus}",
	"customMenus": "${CNTX.customMenus}",
	"customMenusDefault": "${CNTX.customMenusDefault}",
	"notification": "${CNTX.notification}"
}

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.

By default, the Footer Menu component does not contain any value for this key.

{}

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.

By default, the Footer Menu component does not contain any value for this key.

""

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 Footer Menu component does not contain any customization for this key.

{}

Footer Menu

The Footer Menu component group contains the following contract.

• Default Selection Config

Default Selection Config

The Component consumer uses this contract to select a row by default (before user selection) by providing the data in a String format.

${CNTX.defaultMenu}

onError Event

The OnError event handles any error that occurs during the user journey. When the component triggers the onError event, the event passes an error object to the parent widget. This object contains information about the error and where it had occurred.

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

handleCallToAction Event

When the user clicks on a Footer menu item, the Infinity application triggers the handleCallToAction event. This event passes the information of the selected footer menu item to the component consumer through the segment template controller.

var data = {
	"label": this.footerMenuConstants.WATCHLIST,
	"icon": "watch_list_2.png",
	"selectedIcon": "watch_list.png",
	"isActive": false,
	"entitlements": "['WEALTH_WATCHLIST_INSTRUMENT_VIEW','WEALTH_WATCHLIST_INSTRUMENT_CREATE']",
	"navigation": {
		"appName": "TestMA",
		"friendlyName": "frmFooterMenuDestination"
	} //Component Consumer should provide valid navigation config as per flow.
};
this.handleCallToAction(data);

setContext Method

This method is invoked inside the parent component or form controller to set the data from the component consumer in the Footer Menu component.

this.view.footermenu.setContext(contextData);

Context Object

A Context Object is a JSON object that passes the data required for the component. The Context Data Object in the Footer Menu component sets the data from the component consumer in the component.

The Context Data object passes the following information of each menu item to the Footer Menu component in an Array format.

• label
• icon
• selectedIcon
• isActive
• navigation
• entitlements

The Context Data Object also passes the following information about the notifications in the Footer Menu component.

• icon
• selectedIcon
• isNotificationAvailable

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

var context = {
	"defaultMenus": [{
			"label": this.footerMenuConstants.OVERVIEW,
			"icon": "overview_2.png",
			"selectedIcon": "overview.png",
			"isActive": true,
			"navigation": {
				"appName": "TestMA",
				"friendlyName": "frmFooterMenuDestination"
			} // Component Consumer should provide valid navigation config as per flow.
		},
		{
			"label": this.footerMenuConstants.MENU,
			"icon": "menu_2.png",
			"selectedIcon": "menu.png",
			"isActive": false,
			"navigation": {
				"appName": "TestMA",
				"friendlyName": "frmFooterMenuDestination"
			} // Component Consumer should provide valid navigation config as per flow.
		}
	],
	"customMenus": [{
			"label": this.footerMenuConstants.WATCHLIST,
			"icon": "watch_list_2.png",
			"selectedIcon": "watch_list.png",
			"isActive": false,
			"entitlements": "['WEALTH_WATCHLIST_INSTRUMENT_VIEW','WEALTH_WATCHLIST_INSTRUMENT_CREATE']",
			"navigation": {
				"appName": "TestMA",
				"friendlyName": "frmFooterMenuDestination"
			} // Component Consumer should provide valid navigation config as per flow.
		},
		{
			"label": this.footerMenuConstants.TRANSFER,
			"icon": "transfer_2.png",
			"selectedIcon": "transfer.png",
			"isActive": false,
			"entitlements": "['INTRA_BANK_FUND_TRANSFER_CREATE','TRANSFER_BETWEEN_OWN_ACCOUNT_CREATE','INTER_BANK_ACCOUNT_FUND_TRANSFER_CREATE','INTERNATIONAL_ACCOUNT_FUND_TRANSFER_CREATE','P2P_CREATE','INTRA_BANK_FUND_TRANSFER_CREATE_RECEPIENT','TRANSFER_BETWEEN_OWN_ACCOUNT_CREATE_RECEPIENT','INTER_BANK_ACCOUNT_FUND_TRANSFER_CREATE_RECEPIENT','INTERNATIONAL_ACCOUNT_FUND_TRANSFER_CREATE_RECEPIENT','P2P_CREATE_RECEPIENT']",
			"navigation": {
				"appName": "TestMA",
				"friendlyName": "frmFooterMenuDestination"
			} // Component Consumer should provide valid naviagtion config as per flow.
		}
	],
	"customMenusDefault": [{
			"label": this.footerMenuConstants.CONTACTUS,
			"icon": "contact_us_2.png",
			"selectedIcon": "contact_us.png",
			"isActive": false,
			"entitlements": "[]",
			"navigation": {
				"appName": "TestMA",
				"friendlyName": "frmFooterMenuDestination"
			} // Component Consumer should provide valid naviagtion config as per flow.
		},
		{
			"label": this.footerMenuConstants.LOCATEUS,
			"icon": "locate_us_2.png",
			"selectedIcon": "locate_us.png",
			"isActive": false,
			"entitlements": "[]",
			"navigation": {
				"appName": "TestMA",
				"friendlyName": "frmFooterMenuDestination"
			} // Component Consumer should provide valid naviagtion config as per flow.
		}
	],
	"notification": {
		"icon": "menu_notification_2.png",
		"selectedIcon": "menu_notification.png",
		"isNotificationAvailable": false
	}
};