Choice Docker

Overview

The Choice Docker is a component that contains a content area and a navigation link. The content can be an action that the user must perform. In this case, the navigation link will take the user to a list of options on which the user can perform the action. The content can also be a brief heading or information, in such a case, the navigation link takes the user to more detailed information about the header.

The Choice Docker component is a navigation component that provides a list of clickable options to the user. A developer can configure the onclick events of these links to navigate to another screen such as a Bottom Sheet component, or a Drop Down component as per the requirement. The run-time configurations for this component should be set in the parent of the component.

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

Choice Docker Contracts

The Choice Docker component contains the following contracts for customizing the template widgets and navigation.

• Service Parameters
• Data Mapping
• Data Formatting
• Conditional Mapping Key
• Conditional Mapping
• Choice Docker
• onError Event
• onRowClick Event
• setContext Method
• setConfigsFromParent Method
• updateContext Method

Service Parameters

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

{}

Data Mapping

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

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

{
  "segChoiceDocker": {
    "segmentMasterData": "${CNTX.Options}",
    "segmentUI": {
      "headerTemplate": {
        "lblHeader": "${segmentMasterData.headerText}"
      },
      "rowTemplate": {
        "lblIcon": "${segmentMasterData.optionIcon}",
        "lblName": "${segmentMasterData.optionName}"
      }
    }
  }
}

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 lblName, follow this format.
  

  "lblName": "Transaction"

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

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

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

  "lblName": "${segmentMasterData.optionName}"

• While designing a new template, follow proper naming conventions for the widgets. 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 data from Collection Object or service response as per the Conditional Mapping key. By default, this component contains no value in this contract.

{}

Choice Docker

The Choice Docker contract of the Choice Docker Component is used to configure the properties of the widgets, rows of the segment, header template, and any other operations if required.

The Choice Docker contract of the Choice Docker Component contains the following fields.

• Row Template Config
• Header Template Config
• Row Click Identifier
• Seperator Widget

Row Template Config (rowTemplateConfig)

Assigns the dynamic template configurations to display the details 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: flxTempChoiceDocker1, where flxTempChoiceDocker1 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": "flxTempChoiceDocker1", 
"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: flxTempChoiceDocker2, where flxTempChoiceDocker2 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": "flxTempChoiceDocker2", 
"microAppName": "ResourcesMA"
}

Row Click Identifier (rowClickIdentifier)

The Row Click Identifier contract helps to bind the onRowClick event of the Segment widget to a particular widget inside the Segment template (normally a FlexContainer). If this contract has no value, no action is performed when the Segment row is clicked or tapped.

flxParent 

Seperator Widget (separatorWidget)

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

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

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. Using this method, a developer can pass the data required for the component from the parent of the component.

this.view.choicedocker.setContext(contextData);

setConfigsFromParent Method

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

var configParams = {
	"serviceParameters": "this._cardServiceParameters",
	"dataMapping": "this._cardDataMapping",
	"dataFormatting": "this._cardDataFormatting"
};
this.view.choicedocker.setConfigsFromParent(configParams);

updateContext Method

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

this.view.choicedocker.updateContext(contextData);

Context Object

The context object is a JSON object that is used as an input in the Choice Docker component containing the details required for navigation from the parent component.

The Context object used inside the Choice Docker component can contain the following keys.

• header
• optionName
• rowId

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

var contextData = {
	"data": {
		"header": "Transactions"
	},
	"Options": [{
			"optionName": "Contact Us",
			"rowId": "contactUs"
		},
		{
			"optionName": "FAQs",
			"rowId": "faqs"
		}
	]
};