Selection

Overview

The Selection component is a generic contractual component that allows to select a single or multiple values from a list of records or options. Selection component can be used in many areas throughout the application. For example, to display the sorting criteria for a list of records. There are two main UI variations available for Selection component.

• Single Selection: The Selection component for single selection provides options to customize the title and row data. The component also allows the selection of a default value and highlighting of the selected value.
• Multi Selection: The Selection component for multiple selection provides options to customize the title, row data, Select All button, and a label to display the selected number of records. The Selection component for multiple selection also provides the capability to select the default value and highlight the selected value.

The run-time configurations for this component must be set in the Form Controller of the parent of the component.

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

Selection Contracts

The Selection component contains the following contracts for customizing the template widgets and actions to be performed when a value is selected in the component.

• Service Parameters
• Data Mapping
• Data Formatting
• Conditional Mapping Key
• Conditional Mapping
• Selection
• onError Event
• onSelectionDataSet Event
• setContext Method
• setConfigsFromParent Method
• updateContext Method

Service Parameters

The Service Parameters contract of the Selection Component helps to set the service details required to retrieve the response data. In the Selection Component, the Service Parameter contract uses the SelectionServiceObject Object to retrieve the data to be displayed in a list.

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

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

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

Data Mapping

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

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

{
    "segSelection": {
        "segmentMasterData": "${Collection.Transactions}",
        "segmentUI": {
            "headerTemplate": {
                "lblHeading": "${CNTX.data.header}",
                "lblSubLabel": "${CNTX.data.transactionType}",
                "imgTitle": "hdfc_bank.png",
                "lblSelectAll": "Select All",
                "flxSelectAll": "flxSelectAll",
                "lblAccounts": "${RCD_COUNT} + /s +  ${CNTX.data.selectionText}"
            },
            "rowTemplate": {
                "lblOption": "${segmentMasterData.accountID}",
                "lblOption2": "${segmentMasterData.payeeCurrency}"
            },
            "selectedRowTemplate": {
                "lblOption": "${segmentMasterData.accountID}",
                "lblOption2": "${segmentMasterData.payeeCurrency}"
            },
            "actions": {
                "SelectAll": "flxSelectAll"
            },
            "headerDataOnToggleSelection": {
                "widgetId": "lblSelectAll",
                "textOnSelectAll": "Select All",
                "textOnUnselectAll": "Unselect All"
            }
        }
    }
}

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 any of these formats.

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

  "lblOption2": "Transaction"

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

  "lblOption2": "${i18n{i18n.common.amount}}"

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

  "lblOption2": "${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, 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.

{}

Selection

The Selection group are group of contracts specific to the Selection Component. It is used to configure the templates required for the header, row, and selected row. This group also provides options to decide the type of selection and default selection properties.

The Selection group of the Selection Component contains the following contracts.

• Row Template Config
• Header Template Config
• Selected Template Config
• Selection Type
• Default Selection Config
• Separator Widget

Row Template Config (rowTemplateConfig)

Assigns the dynamic template configurations to display the list of records 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: flxTempSelection2, where flxTempSelection2 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": "flxTempSelection2",
	"microAppName": "ResourcesMA"
}

Header Template Config (headerTemplateConfig)

Assigns the header template to display the details in a tabular format. If this field is empty, then the Segment will appear without a header. A developer can set the value for this contract in two formats.

• String Format: The header template ID is provided in a String format. For example: flxTempSelection1, where flxTempSelection1 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": "flxTempSelection1",
	"microAppName": "ResourcesMA"
}

Selected Template Config

Assigns the row template to the user selected option. 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: flxTempSelection3, where flxTempSelection3 is the selected 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": "flxTempSelection3",
	"microAppName": "ResourcesMA"
}

Selection Type

This contract is used to set the flow for the Selection component. The developer can set it as single or multi-select based on the requirement. The UI of the component is decided based on this value.

Default Selection Config

This contract is used to set the default row to be selected in the Selection component before the user selects.

{
	"SelectionDefault": {
		"key": "transactionId",
		"value": ["${CNTX.DefaultSelectValue}"],
		"operator": "EQ"
	}
}

Seperator Widget

This contract is used to specify the widget ID of the separator widget used inside a Segment row template, which should be hidden in the last record of the segment. If this field is empty, the separator widget will appear after the last record of the Segment.

flxSeparator

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

onSelectionDataSet Event

The onSelectionDataSet event is triggered when the user clicks on any row from the list of options. This event is used to pass the data of the selected row from the component to the parent of the component (Form controller).

var selectedrowdata = {
	"transactionId": "PI211050X6YKSVMC",
	"amount": "43.13"
};
this.onSelectionDataSet(selectedrowdata);

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.selection.setContext(contextData);

setConfigsFromParent Method

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

var configParams = {
	"serviceParameters": "this.__SelectionServiceParameters",
	"dataMapping": "this.__SelectionDataMapping",
	"dataFormatting": "this.__SelectionDataFormatting"
};
this.view.selection.setConfigsFromParent(configParams);

updateContext Method

This method updates the context data that is already set in the Selection component.

this.view.selection.updateContext(contextData);

Context Object

The context object is a JSON object that is used as an input in the Selection component from the parent of the component (Form Controller).

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"
		}
	]
};