22/09/2022 16:03 Infinity Components

 > Infinity > Infinity Components > Audience

Audience
This document is meant for consumption by the developers working on Infinity apps. Before getting started with working on Infinity Components,
developers must go through Quantum and Infinity training.

A good understanding of the following concepts and technologies is a must.

Quantum Products (Visualizer/ Fabric)

MVC Architecture
Infinity Solutions
OLB
Understanding of JSON and JSON Path concepts
Retail Banking Functionality

Infinity Component Architecture

Architecture Overview

The Components used in the Infinity apps are an extension of the Components with contracts of Quantum Visualizer. MVC architecture contains
Model, View, and Controllers. The MVC architecture provides a highly modular and structure to the components.

The Infinity Component architecture consists of the following sections.

Object Service
Generated Data Model and Fabric SDK

Validation and Formatting Framework

Infinity Accelerator Component

kcabdeeF
Object Service

Infinity Components are not just UI elements. This layer provides the capability to create an end-to-end component that uses Experience APIs as well
as UI features to be tightly coupled with the UI layer of the component.

The Object Service layer of the Infinity Components contains various configurations such as attributes, validation rules, the pre/ post processors, and
the data transformation. These help in manipulating and validating the response object that is retrieved using the Quantum Fabric.

Although Quantum Fabric provides standard data types such as string and number, the Object Service layer helps to create data formats specific to
the component. For example, when an amount is retrieved from the response object, it is normally retrieved as a string. However, a new data
business format/ type can be created using the Object Service layer, known as the AMOUNT. This business type can have its own validation rules
and configurations.

For more information about using Object Service in Quantum Fabric, refer to the Object Services section in Quantum Fabric User Guide.

Generated Data Model and Fabric SDK

The Quantum Visualizer automatically generates the Data Model and Fabric SDK layers of the component.

The Generated Data Model layer encapsulates the data from various sources and converts it into a standard. This makes it easier for a developer to
provide data in only one manner. It forms a sort of interface between the Object Service layer and the Infinity Accelerator Component layer. If there is
a change in the manner in which the Service layer provides data, the UI layer will still get the data in the format that the UI layer can identify. For more
information about creating a data model using Quantum Visualizer, refer the Quantum Reference Architecture guide.

The Fabric SDK is used to connect the services provided inside the Object Service layer with the component. For more information on the Fabric
SDK, refer the Quantum Fabric SDK guide. 
Validation and Formatting Framework

https://docs.temenos.com/docs/Solutions/Infinity/Digital_Banking/Infinity_Components/Infinity_Components/Architecture/Infinity_Components.htm… 1/4
22/09/2022 16:03 Infinity Components

The Validation and Formatting Framework layer of the Infinity Components provides a centralized area for validating the data entered by the user.
This layer uses some third-party frameworks as well as modules provided in the require section of the Quantum Visualizer to check and format any
data of the component. The data formatting framework provided inside the require modules formats the data at a global level.

The Validation and Formatting Framework helps to control the validations from a single point. In previous versions of Infinity Components, this layer
was part of every UI layer separately. From the new version of Infinity Component, all the validation and formatting rules are available inside the
require module inside Quantum Visualizer. This means that the data formatting and validation occurs at an application level.

Infinity Accelerator Component

The Infinity Accelerator Component layer is the actual component that is created using Quantum Visualizer. It includes the controllers, view, and data
of the component. The component consists of the following sections.

Business Controller: The Business controller contains the Object definitions, code to fetch or push data to Fabric, performs all business logic,
data formatting, data validation, and updates the Data Collection Object. The Business Controller processes the data coming from Quantum
Fabric, context variable, or user input and saves the data in the Data Collection Object.

Data Collection: The Data Collection is a JSON collection Object containing the data used inside the component. A collection object is local to
a component and can be accessed only within the component boundary. Any changes made by the Business controller to the Data Collection
automatically updates the View controller's data mapping.

View Controller: The View section uses the View Controller to map the data from the Data Collection to the widgets. Any user action
performed (for example, Button click, text box value change, etc.) on view is managed on View Controller, and this controller triggers actions to
the Business Controller to make the requested changes in the Data Collection Object. Any action performed inside the View Controller section
triggers an action inside the Business controller.

View: The View section contains the component user interface/ UI. The UI of the component is created using the widgets inside Quantum
Visualizer.

Component Contracts

All Infinity Components used inside the Infinity apps contain the following five contracts.

Service Parameters
Data Mapping

Data Formatting
Conditional Mapping Key

kcabdeeF
Conditional Mapping

Service Parameters

The Service Parameters property is the entry point for any component. This property uses the various parameters required to retrieve the data
definition (metadata) and data from the Object service.

Here are the major keys that are to be provided to retrieve data using Experience APIs.

Property Description

ServiceType Defines the type of service to be performed.

Type: String For example: customVerb, getByCriteria

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

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

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

Criteria The request payload as defined and configured in the Quantum Fabric Object service and
Type: JSON object operation.

Data Mapping

The Data Mapping property is the end-point of the component. The data from the Data collection object is mapped to the widgets of the view layer of

the component using this property in a JSON format. The JSON object is configured as a key-value pair where the key is KUID of the widget on the
View Layer and the value is the attribute in the Data Collection Object. Whenever there is a change in the data state in the Data Collection object, the

https://docs.temenos.com/docs/Solutions/Infinity/Digital_Banking/Infinity_Components/Infinity_Components/Architecture/Infinity_Components.htm… 2/4
22/09/2022 16:03 Infinity Components

widgets will automatically display the altered data.

The widgets will display the data as provided inside this property unless the Conditional Mapping property is used to display different data for the
widget.

Data Formatting

The Data Formatting property is used to provide a custom format for a specific requirement. For example, while implementing a date format, if the
date is to be displayed in the YYYY/MM/DD instead of the DD/MM/YYY, the Data Formatting contract helps to overwrite the default formatting ruleset
as well as add new rulesets. For more information on the customized Data formatting, refer the Custom Format Type inside the Data Formatting
Framework guide.

Conditional Mapping Key

The Conditional Mapping Key is an optional parameter used to display the various UIs for different functional flows. For example, the Conditional
Mapping Key contract is used to set the condition if a bank wants different information rendered for Online Transactions and another data set
(information) for cash withdrawal or blocked funds entries.

Conditional Mapping

The Conditional Mapping property is an optional parameter. Using this property a developer can configure the mapping details for the key values in
the Conditional Mapping Key. The Conditional Mapping takes precedence over the mapping provided in the Data Mapping property. Conditional
Mapping helps to provide a different UI for the various values of the Conditional Mapping Key.

For example, in a scenario where the Conditional Mapping Key is given as transaction type. If the transaction type is Check Deposit, then three
columns containing the check date, check amount, and the account balance are displayed. For all the other types of transactions five columns as
defined under the Data Mapping property are displayed.

Even though Infinity Components are created using the MVC architecture, these components can be used in Quantum Visualizer projects that follow
Reference Architecture or MVC 2.0 Architecture (Used typically by the Infinity apps).

Configure Properties

Infinity Components use their own nomenclature to enrich the properties usage and meet higher business requirements. Using Infinity Components,

kcabdeeF
you can use the low code approach and customize the component as per your requirement directly from Visualizer. The properties associated with
the component are assigned directly through the Quantum Visualizer. You do not need to write any code for assigning values to the properties. Follow
these steps to customize the values of a property of a component.

1. Open the Form with the component in the Visualizer.

2. Select the component in the canvas.

3. From the Properties panel, navigate to the Component tab.
The following screen-shot shows the list of properties available for the Transaction List component.

4. Modify the values provided in the fields as per your requirement.

Invoke a Method

Infinity Components have exposed methods that you can use to set or get information from the component. These methods are special functions that
already have defined a set of actions to be performed by the component when its invoked. It is recommended to invoke the methods before the
component instance is initialized. You can invoke the methods either in the preShow event or in the onNavigate event of the FlexForm.

For more information about how to create a method inside a component, click here.

For example, while using the Account Summary component if the developer requires the account ID of the account selected by the user in the parent
form, the developer can invoke the setContext. The setContext method uses the context variable as an argument to pass the account ID from the
component to the parent form.

Implement an Event

Infinity Components also provides an option to customize the actions you want to perform when an event is triggered.

To set the required actions, follow these steps.

1. Open the Form with the component in the Visualizer.

https://docs.temenos.com/docs/Solutions/Infinity/Digital_Banking/Infinity_Components/Infinity_Components/Architecture/Infinity_Components.htm… 3/4
22/09/2022 16:03 Infinity Components
2. Select the component in the canvas.

3. From the Properties panel, navigate to the Action tab.

The list of actions available for the component is shown here.
4. For the action you want to modify, click Edit.
The Action Editor window appears. For more information about how to use the Action Editor, click here.

For information regarding how to create an event inside a component, click here.

setContext

The Context object is a JSON object that helps you to pass any information from the Form controller. The context variable is configured using the
setContext method. The setContext method can be used to pass service response from a Form to the child Component when the data is available at
the form level and is required to make API calls inside the component.

For example, in the Account Summary component, when you click on any account in the dashboard, the information regarding the specific
component is set in the context variable. This variable is then used to pass the information of the selected account to the next page to display the
details of the account.

Entitlement

Entitlement keys are key-value pairs that help in authorizing users to perform specific actions or services. When a user logs into an application, an
array of keys is assigned to the response of the user. While using the application, when the user clicks/ taps on any button or link, the key from the
contract/ property is compared with the keys assigned to the user from the login response. The action associated with this key is executed only when
the entitlement key of the contract/ property match with the keys assigned to the user. Thus, allowing the developer to restrict the users from
performing specific actions and services.

Here is an example of a contract/ property driven by entitlement.

{
"text": {
"$.BREAKPTS.BP1": "Add Infinity Bank Account",
"default": "Add Infinity Bank Account"
},
"action": {
"level": "Component",

kcabdeeF
"method": "quickLinkAction1",
"context": ""
},
"entitlement": [
"INTRA_BANK_FUND_TRANSFER_CREATE_RECEPIENT"
]
}

Error Handling

Infinity Component provides the developer with the onError event to handle the errors that occur while using the component. The onError event
contains errObj JSON object containing all the information such as the message and error type when an error is thrown. These errors are thrown
while executing methods inside the component controller or while accessing the services in the DAO layer of the component. The developer can then
handle the error as required.

Here is a sample input that a developer can provide to the onError event.

var errObj = {
"errorInfo": "Error in initActions method of the component.",
"errorLevel": "Configuration",
"error": err
};
this.onError(errObj);


Published on :
Copyright © 2020-2022 Temenos Headquarters SA Thursday, September 8, 2022 7:01:56 PM IST

https://docs.temenos.com/docs/Solutions/Infinity/Digital_Banking/Infinity_Components/Infinity_Components/Architecture/Infinity_Components.htm… 4/4