Carousel Card

Overview

The Carousel Card Component displays multiple cards using pagination. Each card of the component can be customized based on the user's requirement. The cards are then placed in a carousel format. The carousel format enables the user to view the cards one by one by swiping sideways.

The Carousel Card component can be used to display campaigns, account details (such as available balance, account number, and user name), and the list of accounts in a carousel format inside an application.

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

Carousel Card Contracts

The Carousel Card Component provides the contracts given below to customize the UI and data to be displayed in the cards.

Service Parameters

The Service Parameters contract of the Carousel Card Component helps to set the service details required to configure the APIs required in a component.

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

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

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

Property Description
ServiceType

Type: String

Defines the type of service to be performed.

For example: customVerb, getByCriteria

Service

Type: String

Name of the object service mentioned in the Quantum Fabric layer to fetch the data and meta data required for the component.

Object

Type: String

Name of the object linked to the object service mentioned above in the Quantum Fabric layer to fetch the data required for the component.

Verb

Type: String

Name of the operation or custom verb linked to the specified objects in the Quantum Fabric layer to fetch the data required for the component.

Criteria

Type: JSON object

The request payload as defined and configured in the Quantum Fabric Object service and operation.

Data Mapping

The Data Mapping contract of the Carousel Card 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 Carousel Card Component.

{
	"segments": {
		"segPage": {
			"segmentMasterData": "${CNTX.accountsList}",
			"segmentUI": {
				"lblAccount": "${segmentMasterData.lblAccount}",
				"rtxAmount": "${segmentMasterData.rtxAmount}",
				"lblAmountDesc": "${segmentMasterData.lblAmountDesc}",
				"lblDescKey1": "${segmentMasterData.lblDescKey1}",
				"lblDescValue1": "${segmentMasterData.lblDescValue1}",
				"lblDescKey2": "${segmentMasterData.lblDescKey2}",
				"lblDescValue2": "${segmentMasterData.lblDescValue2}"
			}
		}
	}
}

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

Key Description
segPage

This section maps the data with the widgets in a key value format. This parameter accepts a JSON object with the following key value pairs.

  • segmentMasterData: This key is used to set if the data must be retrieved from a service response or from the Context Data Object. The following values can be assigned to this key.
    • ${Collection.accountsList} for setting the data from service response.
    • ${CNTX.accountsList} for setting the data from the Context Data Object.
  • segmentUI: A JSON object that is used to map the data with the segment widgets. For more information about how to set the data in this key refer the Important Considerations section.

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 lblField1, follow this format.
    "lblField1": "AccountName"
  • 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 the name of the account.
    "lblField1": "${i18n{i18n.common.accountName}}"
  • 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 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, the Carousel Card 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 Carousel Card 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 Carousel Card Component does not contain any customization for this key.

{}

Cards

The Cards group of the Carousel Card Component is used to set the row template used in the component. The Cards group of the Carousel Card Component contains the following properties.

Row Template Config

The Template property is used to set the Segment row template used in the component. This template is used inside the Data Mapping contract (segPage key) to map the widgets to the data.

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 flxTempCards1 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.
Parameter Value

Syntax

The row template ID as a String or a JSON object containing the following keys.

  • templateID: Sets the row template ID as a String.
  • microAppName: Sets the name of the Microapp containing the template.

Default Value 

{
  "templateID": "flxTempCards1",
  "microAppName": "ResourcesMA"
}

Type

JSON/ String

Row Data

This contract is used to insert data to a particular row index.

Parameter Value

Syntax

This contract is assigned a JSON object with the following key-value pairs.

  • isDataToSetAtRow: Enables setting of the data to a particular row index.
  • currentIndexToBeDisplayed: Enables the display of the current row index.
  • currentIndex: The offset index of the Carousel Card component where the data is to be inserted.
  • dataToBeDisplayed: Provides the data to be displayed in the provided index.

Default Value 

{
	"isDataToSetAtRow": false,
	"currentIndexToBeDisplayed": false,
	"currentIndex": 0,
	"dataToBeDisplayed": {
		"segPage": {
			"segmentMasterData": "${CNTX.CardContextForRow}",
			"segmentUI": {
				"lblAccount": "${segmentMasterData.lblAccount}",
				"rtxAmount": "${segmentMasterData.rtxAmount}",
				"lblAmountDesc": "${segmentMasterData.lblAmountDesc}",
				"lblDescKey1": "${segmentMasterData.lblDescKey1}",
				"lblDescValue1": "${segmentMasterData.lblDescValue1}",
				"lblDescKey2": "${segmentMasterData.lblDescKey2}",
				"lblDescValue2": "${segmentMasterData.lblDescValue2}"
			}
		}
	}
}

Type

JSON

onError Event

The OnError event is invoked when an error occurs in the component. When the onError event is invoked, an error object is passed to the parent widget. The error object contains the information about the error and the error stack.

Parameter Value
Input parameter JSON object

Object Description

The JSON object contains the following keys:

  • level: This key contains the String value regarding the place in which the error occurs. It can be from the component View controller or from the component Business controller.
  • method: This key contains the method in which the error occurs.
  • error: This key contains the actual error message and the stack.

Sample Input 

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

onSwipe Event

The onSwipe event is used to set the actions to be executed when the cards are swiped sideways.

Parameter Value
Input parameter

The following parameters are passed as a JSON object when the event is triggered.

  • RowData: JSON object containing the data associated with a specific row.
Programmatic Name onSwipe

Sample Code 

this.onSwipe(RowData);

Return Type

None

setContext Method

This method is invoked inside the parent component or form controller. This method is used to pass the Context Data Object required for the Carousel Card component.

Parameter Value

Syntax

this.view.componentID.setContext(contextData);

Input parameter JSON object containing the Context Data Object. For more information on the context object, click here.

Sample Input 

this.view.card.setContext(contextData);

Return Type

None

setConfigsFromParent Method

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

Parameter Value

Syntax

this.view.<componentID>.setConfigsFromParent(configParams);

Input parameter

configParams: Sets the JSON object required for the child component. The JSON object can contain all the contracts used in the Carousel card component as keys such as:

  • serviceParameters: JSON object containing the Service configurations.
  • dataMapping: JSON object containing the data mapped with the widget.
  • dataFormatting: JSON object containing the look and feel of the data.

Sample Input 

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

Return Type

None

setSegmentData Method

This method is invoked to reset the data in the Carousel Card component. When this method is invoked, the Segment row is displayed with the new data from the Context variable or Collection Object.

Parameter Value

Syntax

this.view.componentID.setSegmentData();

Input parameter NA

Sample Input 

this.view.card.setSegmentData();

Return Type

None

Context Object

The context object is a JSON object that is used as an input in the Carousel Card component containing the details displayed on the cards such as account name, pending deposit, amount, and available balance.

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

var contextData = {
	"accountsList": [{
			"accountName": "krishna test data1",
			"amount": "$999&lt;sup&gt;99&lt;/sup&gt;",
			"availableBalanceKey": kony.i18n.getLocalizedString("i18n.common.availableBalance"),
			"pendingDepositKey": kony.i18n.getLocalizedString("i18n.common.pendingDeposit"),
			"availableBalanceDesc": "-$123.45",
			"lblPendingWithdrawals": kony.i18n.getLocalizedString("i18n.common.pendingWithdrawals"),
			"pendingDepositValue": "+$1,2345.67",
			"icon": {
				"isVisible": false
			}
		},
		{
			"accountName": "krishna test data2",
			"amount": "$999&lt;sup&gt;99&lt;/sup&gt;",
			"availableBalanceKey": kony.i18n.getLocalizedString("i18n.common.availableBalance"),
			"pendingDepositKey": kony.i18n.getLocalizedString("i18n.common.pendingDeposit"),
			"availableBalanceDesc": "+$123.45",
			"lblPendingWithdrawals": kony.i18n.getLocalizedString("i18n.common.pendingWithdrawals"),
			"pendingDepositValue": "+$1,2345.67",
			"icon": {
				"isVisible": true
			}
		}
	],
};

 

 
Expand/Collapse
Share
Print

In this topic

Copyright © 2020- Temenos Headquarters SA

Published on :
Monday, May 2, 2022 5:08:49 PM IST

Feedback
x