List

Overview

The List Component is a contractual component used to display lists in the form of a table. These records are either retrieved from a service response or Context Data Object.

The List Component supports the features mentioned below while displaying the list of records.

• The List Component UI contains a List Header that displays the title and the number of records to display based on the service call. The developer also has the option to enable or disable the List Header.
• Each record can have multiple rows. The number of rows, format, font size of each value in the row, and logos are customizable. Each record is also provided with options to display statuses using different color buttons. The colors of these buttons are customizable.
• The records can be configured to display in ascending or descending order by default.
• The records provide various options when the user swipes on a record. These actions can be modified based on the status of the transaction. The Swipe actions are also dependent on the entitlement access provided to the user. For example, a user will find the option to edit in the Transfer Activities screen only if the user has entitlement access to it.
• The List Component displays the message, No records Found, when the search criteria does not match with any records or if the service response does not contain any data.

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

List Contracts

The List Component contains contracts for customizing the data and properties for the widgets. The List Component contains the following contracts for customization.

• Service Parameters
• Data Mapping
• Data Formatting
• Conditional Mapping Key
• Conditional Mapping
• List
• Swipe
• Sort
• onError Event
• setCustomData Event
• onSwipeAction Event
• onRowClick Event
• setContext Method
• searchKeyword Method
• setConfigsFromParent Method
• setEntitlements Method
• sortRecords Method
• updateContext Method
• deleteRecord Method
• resetSwipe Method

Service Parameters

The Service Parameters contract of the List Component helps to set the service details required to retrieve the response data. In List Component, the Service Parameter contract uses the ListServiceObject Object to retrieve the data to be displayed in a list. This data is then displayed in a table format.

Here is a sample of the JSON object provided in the Service Parameter of the List Component.

{
	"ListServiceObject": {
		"ServiceType": "customVerb",
		"Service": "Accounts",
		"Object": "DigitalArrangements",
		"Verb": "getList",
		"Criteria": {}
	}
}

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

Data Mapping

The Data Mapping contract of the List Component maps the widget IDs with the data to be displayed. The data is retrieved from Context Data Object or Service response.

Here is a sample of the JSON object provided in the Data Mapping of the List Component.

{
	"segList": {
		"segmentMasterData": "${CNTX.Transactions}",
		"segmentUI": {
			"headerTemplate": {
				"lblName": "${CNTX.data.header} + /s + ( + ${RCD_COUNT} + )"
			},
			"rowTemplate": {
				"lblField1": "${segmentMasterData.description}",
				"lblField2": "${segmentMasterData.lblField2}",
				"lblField3": "${segmentMasterData.transactionId}",
				"flxField2": "${segmentMasterData.flxField2}",
				"imgIcon": "${segmentMasterData.companyLogo}"
			}
		}
	},
	"flxNoRecords": {
		"imgNoRecords": "no_records_found.png",
		"lblNoRecords": "No records found."
	}
}

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

Important Considerations

To map data with the widgets inside the segmentUI key, a developer must follow these formats.

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

  "lblField1": "Transaction"

• To map an i18n value, provide the i18n key value in a String format. In the following example, the lblField1 Label is mapped with the i18n key for Amount.
  

  "lblField1": "${i18n{i18n.List.Amount}}"

• To map a context or a collection object, provide the value in a String format. In the following example, the lblField1 Label is mapped to the Account Type data retrieved from the Context Data Object.
  

  "lblField1": "${segmentMasterData.AccountType}"

• While designing a new template, follow proper widget naming conventions. For example, the name of a Label widget must start with lbl and the name of an Image widget must start with img.

Data Formatting

The Data Formatting property is used to provide a custom format for a specific requirement. By default, the List Component does not contain any customization.

{}

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, the List Component does not contain any value for this key.

{}

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, the List Component does not contain any customization for this key.

{}

List

The List group of the List Component is used to configure the properties of the widgets, rows of the segment, and any arithmetic operations if required.

The List group of the List Component contains the following properties.

• Row Template Config
• Header Template Config
• Height of List
• Records Per Page
• Dynamic Data
• Arithmetic Operations
• Enable Row Click
• Row Click CTA Identifier

Row Template Config

Assigns the dynamic template configurations to display the Attachments in a tabular format. If this field is empty, then the entire segment 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: flxTempList1, where flxTempList1 is the row 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": "flxTempList2", 
"microAppName": "ResourcesMA"
}

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: flxTempList2, where flxTempList2 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": "flxTemplist2",
  "microAppName": "ResourcesMA"
}

Height of List

This field sets whether the height of the drop-down list is fixed or changes during run-time.

Fixed

Records Per Page

This field can be configured only when the value of the Height of List contract is Fixed. The Records Per Page field helps to achieve lazy loading in the List Component. For example, the Records Per Page is set as 10. When the user scrolls down to the end of the Segment, ten more records are appended to the end of the Segment.

If lazy loading is not required and the entire data needs to be set only once, then the value of Records Per Page field must be set as zero. This field does not accept any negative values.

20

Dynamic Data

This field sets the properties that can be configured dynamically such as text and skin, of the widgets used inside a segment.

{
  "lblField1": {
    "text": "Money transfer to Linda"
  },
  "lblField2": {
    "skin": "lblGrey500FS30Emp"
  }
}

Arithmetic Operations

The List Component provides the developer options to perform binary arithmetic operations on the various values. The Arithmetic Operations field is used to set these arithmetic operations to the various fields.

{
  "operation1": {
    "input1": "${Collection.ListServiceObject.amount}",
    "input2": "${Collection.ListServiceObject.fees}",
    "operand": "+",
    "output": "${Collection.ListServiceObject.brokerFee}"
  },
  "operation2": {
    "input1": "${Collection.ListServiceObject.brokerFee}",
    "input2": "${Collection.ListServiceObject.tax}",
    "operand": "-",
    "output": "${Collection.ListServiceObject.totalAmount}"
  }
}

Enable Row Click

This field is used to enable or disable any action to be performed when the user clicks or taps a row of the Segment.

true

Row Click CTA Identifier

This field assigns an action to be executed when a row of the Segment is clicked or tapped. This field is ignored when the Enable Row Click field has the value false.

{
  "CTAIdentifier": {
    "flxData": "onRowClick"
  }
}

Swipe

The Swipe group of the List component sets the actions to be performed when the user swipes on a row in the list. The Swipe group of the List component contains the following properties.

• Enable Swipe Action
• Swipe Config
• Conditional Swipe Key
• Conditional Swipe Actions

Enable Swipe Action

This field is used to enable or disable the swipe actions for each row.

true

Swipe Config

This field is used configure the actions, text, entitlements, and other properties required for the Swipe action. This field is ignored when the Enable Swipe Action field has the value false.

{
  "swipeMainContainer": "flxSwipeData",
  "swipeActions": {
    "swipeAction1": {
      "lblSwipeBtn1Text": "${i18n{i18n.common.edit}}",
      "widthInDP": "70",
      "entitlements": ["VIEW_ESTATEMENTS"],
      "CTAIdentifier": {
        "flxSwipeBtn1": "SwipeCTA1"
      }
    },
    "swipeAction2": {
      "lblSwipeBtn2Text": "${i18n{i18n.common.repeat}}",
      "widthInDP": "70",
      "entitlements": ["VIEW_LOAN_SCHEDULE", "VIEW_INSTALLMENT_SUMMARY"],
      "CTAIdentifier": {
        "flxSwipeBtn2": ""
      }
    },
    "swipeAction3": {
      "lblSwipeBtn3Text": "${i18n{i18n.common.cancel}}",
      "widthInDP": "70",
      "entitlements": [],
      "CTAIdentifier": {
        "flxSwipeBtn3": "SwipeCTA3"
      }
    }
  }
}

Conditional Swipe Key

The Conditional Swipe Key is used to set the Swipe actions for records based on a certain condition.

${CNTX.Transactions.userStatus} 

Conditional Swipe Action

This field sets the swipe actions based on the key set in the Conditional Swipe Key.

{
	"true": ["swipeAction1", "swipeAction2"],
	"false": ["swipeAction1", "swipeAction3"]
} 

Sort

The Sort group of the List component sets the sorting functionality in the List component. The Sort group of the List component contains the following properties.

• Sort By Default
• Sort Config

Sort By Default

This field enables or disables the component from performing sort by default.

false

Sort Config

This field is used configure the parameters that the Sort action requires. This field is ignored when the Sort By Default field has the value true.

{
    "sortBy": "ASC",
    "sortingParam": "amount",
    "isString": true
}

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

setCustomData Event

This event provides the feasibility that a data or property of a widget can be modified.

this.setCustomData(widgetID, colldata); 

onSwipeAction Event

The onSwipeAction event is used to set the actions to be executed when a swipe button is clicked or tapped.

this.onSwipeAction(CTAID, RowData); 

onRowClick Event

The onRowClick event is used to set the actions to be executed when the row of a Segment is clicked or tapped.

this.onRowClick(RowData); 

setContext Method

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

this.view.list.setContext(contextData);

searchKeyword Method

This method is used to search through the list of the records using a criterion provided by the user.

this.view.list.searchKeyword(searchQuery);

setConfigsFromParent Method

This method is used to set the configurations from the parent component to the List component when the List component is placed inside another component.

var configParams = {
	"serviceParameters": "this._listServiceParameters",
	"dataMapping": "this._listDataMapping",
	"dataFormatting": "this._listDataFormatting"
};
this.view.list.setConfigsFromParent(configParams);

setEntitlements Method

This method is used to set the authorization required for performing various actions inside the component.

var entitlements = {
	"features": [
		"VIEW_COMBINED_STATEMENTS",
		"VIEW_LOAN_SCHEDULE",
		"VIEW_INSTALLMENT_SUMMARY"
	],
	"permissions": [
		"GOAL_VIEW",
		"BUDGET_VIEW",
		"VIEW_ESTATEMENTS"
	]
};
this.view.list.setEntitlements(entitlements);

sortRecords Method

This method is used to sort the list of records in ascending or descending order.

this.view.list.sortRecords(sortType, sortKey); 

updateContext Method

This method is invoked inside the parent component or form controller. This method is used when the component consumer has to update the Context Data Object and the UI of the List component.

this.view.list.updateContext(contextData);

deleteRecord Method

This method deletes a record that matches the provided criterion.

var recordInfo = {
    "accountId": "343877562739",
    "accountType": "Savings"
};
this.view.list.deleteRecord(recordInfo);

resetSwipe Method

This method swipes a row back to its original position without applying any gesture. This method is normally invoked by the component consumer.

this.view.list.resetSwipe();

Context Object

The context object is a JSON object that is used as an input in the List Component containing the details of the transaction.

Out of the response provided, the following parameters are used in the component.

• header
• accountId
• transactionType
• transactionId
• amount

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

var context = {
	"data": {
		"header": "Transactions",
		"accountId": "5465465",
		"transactionType": "Savings"
	},
	"Transactions": [{
			"transactionId": "PI211050X6YKSVMC",
			"amount": "43.13"
		},
		{
			"transactionId": "AA21105364XF",
			"amount": "50.12"
		}
	]
};