Dropdown

Overview

The Dropdown component is a contractual component that displays the list of options, such as the list of currencies, countries, frequencies, payment methods, and contact type(In P2P flow). The Dropdown component provides the following UI features to the developer for customization.

• Make the list of options selectable or not selectable.
• A main header to the drop-down.
• Options to provide section headers, if required.
• Provides search functionality in the drop-down using the Keyword Search component.

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

Dropdown Contracts

The Dropdown component contains contracts for customizing the widgets and UI of the component. The Dropdown component contains the following contracts for customization.

• Service Parameters
• Data Mapping
• Data Formatting
• Conditional Mapping Key
• Conditional Mapping
• Dropdown
• Keyword Search
• onError Event
• onRowSelection Event
• onClose Event
• setContext Method
• displayDropdown Method
• setConfigsFromParent Method
• setDropdownData Method
• updateDefaultSelection Method

Service Parameters

The Service Parameters contract of the Dropdown component provides services that help to set the service details to get the response data. The Dropdown component uses the DropdownServiceObject to retrieve the data. This data is then mapped to the widgets using the Data Mapping property and then displayed on the screen.

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

{
	"DropdownServiceObject": {
		"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 Dropdown component maps the widget IDs with the data to be displayed. This data is retrieved from the Data Collection Object, Context variable, or Service response.

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

{
	"mainHeaderTitle": {
		"lblDropdownHeaderTitle": "${CNTX.data.mainHeaderTitle}"
	},
	"segDropdown": {
		"segmentMasterData": "${CNTX.data.records}",
		"segmentUI": {
			"sectionHeader": [{
				"groupingParam": {
					"currencyType": "existing"
				},
				"lblDropdownSectionTitle": "${CNTX.data.sectionHeaderTitle}"
			}],
			"segmentRowData": {
				"countryId": "${segmentMasterData.countryId}",
				"imgFlag": "${segmentMasterData.countryFlag}",
				"lblCountry": "${segmentMasterData.countryName}",
				"lblCountryCodeOrCurrency": "${segmentMasterData.countryCode}",
				"countryOrCurrencyCode": "${segmentMasterData.countryCode}"
			}
		}
	}
}

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, follow these formats.

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

  "lblCountry": "Country Name"

• To map an i18n value, provide the i18n key value in a String format. In the following example, the lblCountry Label is mapped with the i18n key for the name of the account.
  

  "lblCountry": "${i18n{i18n.common.countryCode}}"

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

  "lblCountry": "${segmentMasterData.countryName}"

• 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 does not contain any value in the Data Formatting 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, the Dropdown component does not contain any value for this contract.

{}

Conditional Mapping

Configuration of this property is tightly coupled with the Boolean value of conditionalMappingKey property. 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 Dropdown component does not contain any value for this contract.

{}

Dropdown

• Row Template Config
• Selected Row Template Config
• Header Template Config
• Records Per Page
• Enable Search
• Default Selection Config
• Sorting Config
• Enable Case Sensitive Search
• Height of Dropdown

Row Template Config

Assigns the dynamic template configurations to display the details for the unselected options 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: flxTempDropdown3, where flxTempDropdown3 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": "flxTempDropdown3",
	"microAppName": "ResourcesMA"
}

Selected Row Template Config

Assigns the row template to display the selected options in the Segment. If this field is empty, then the Segment will appear row templates. A developer can set the value for this contract in two formats.

• String Format: The dynamic row template ID in a String format. For example: flxTempDropdown4, where flxTempDropdown4 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": "flxTempDropdown4",
	"microAppName": "ResourcesMA"
}

Header Template Config

Assigns the section header template to the Segment displaying the options. If this field is empty, then the Segment will appear with out a header. A developer can set the value for this contract in two formats.

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

Records Per Page

The Records Per Page field helps to achieve lazy loading in the Dropdown 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

Enable Search

This field is used to enable the search functionality in the Dropdown component. When this field is set as true, then the Keyword Search component (child) is enabled.

true

Default Selection Config

This field is used to select a row by default (prior to user selection) when the drop-down list appears.

{
	"key": "countryId",
	"value": "5"
}

Sorting Config

This field sets the order of the rows in the drop-down list.

{
	"sortOrder": "ASC",
	"field": "name"
}

Enable Case Sensitive Search

When this field is enabled, the component differentiates between the capital and lower case letters while searching through the drop-down list.

false

Height of Dropdown

This field sets whether the height of the drop-down list.

Half screen

Keyword Search

The Keyword Search component is used inside the Dropdown component. The following contracts of the Keyword Search component are applicable for the Dropdown component.

• Service Parameters
• Data mapping
• Data Formatting
• Conditional Mapping Key
• Conditional Mapping

The contracts in this section will only work if the Enable Search option is enabled.

Service Parameters

The Service Parameters contract of the Keyword Search component provides services helps to set the service details to get the response data. The response data retrieved from the service is mapped to the widgets using the Data Mapping property and then displayed on the screen.

Here is a sample of the JSON object provided in the Service Parameter of the Keyword Search component.

{
  "ObjectName": {
    "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 Keyword Search component maps the widget IDs with the data to be displayed. The data is retrieved from Data Collection Object, Context variable, or Service response. The Data Mapping property of the Keyword Search component maps the i18n key and the text to be displayed as a String.

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

{
  "txtSearchBox":{
    "placeholder" :"Enter search text here",
    "restrictChar":"#@",
    "maxCharacters":"10",
    "rightPaddinginDP":"80",
    "skins": {
      "focus": "flxWhitePrimary500S",
      "regular": "flxWhiteGrey200S"
    }
  },
  "btnCancel":{
    "text" :"Cancel"
   }
}

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, the Keyword Search component does not contain any customization.

{}

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, the Keyword Search 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 Keyword Search component does not contain any customization for this key.

{}

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

onRowSelection Event

The onRowSelection event is triggered when the user selects an option in the Dropdown component.

var selectedRowDataObject = {
	"countryId": "countryId",
	"countryFlag": "imgFlag",
	"countryName": "countryName",
	"countryOrCurrencyCode": "countryOrCurrencyCode"
};
this.view.dropdown.onRowSelection = function(selectedRowDataObject) {};

onClose Event

This event is invoked when the user clicks the Close icon or anywhere outside the drop-down list.

this.view.dropdown.onClose = function () {};

setContext Method

This method is invoked inside the parent component or form controller. This method is used to retrieve the data from the parent of the component and set it in the Dropdown component.

this.view.dropdown.setContext(contextData);

displayDropdown Method

This method is used by the parent of the component to display the drop-down list.

this.view.dropdown.displayDropdown();

setConfigsFromParent Method

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

var configParams = {
	"serviceParameters": "this.__dropdownServiceParameters",
	"dataMapping": "this.__dropdownDataMapping",
	"dataFormatting": "this.__dropdownDataFormatting"
};
this.view.dropdown.setConfigsFromParent(configParams);

setDropdownData Method

This method helps to execute events like preShow or postShow. The setDropdownData method must be invoked when a developer initializes the Dropdown component dynamically.

this.view.dropdown.setDropdownData();

updateDefaultSelection Method

This method sets a default row selection at run-time.

var defaultSelectionConfig = {
	"key": "countryId",
	"value": "5"
};
this.view.dropdown.updateDefaultSelection(defaultSelectionConfig);

Context Object

The context object is a JSON object that is used as an input in the Dropdown Component containing the data to be displayed in the component.

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

• mainHeaderTitle
• sectionHeaderTitle
• records

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

var context = {
	"mainHeaderTitle": "Country Code",
	"sectionHeaderTitle": "Please select a country code",
	"records": [{
			"countryId": "1",
			"countryFlag": "usa.png",
			"countryName": "USA",
			"countryCode": "US (+1)"
		},
		{
			"countryId": "2",
			"countryFlag": "spain.png",
			"countryName": "Spain",
			"countryCode": "ES (+34)"
		}
	]
};