Horizontal Roadmap
This component is used display the Term Deposit products.
Following are the various views of the Horizontal Roadmap component:
- Desktop & tablet view : width > 640
- Mobile view : width < 640
Assumptions:
- There can be any number of Term Deposit products. If there are many products, then a horizontal scroll appears in the flex.
- When you click the right arrow button, the products shift to the right by one position and vice versa.
- When the products are loaded, the left arrow button is not visible. When the user scrolls till the last Term Deposit product, the button is loaded. Similarly, when the last Term Deposit product is visible the right arrow button is hidden.
Usage
Here are the steps to set the component in Quantum Visualizer:
- Open the Temenos DigitalOrigination project in Quantum Visualizer.
- Drag and drop a Flex Container widget onto the required form.
- Select the Flex Container and set the following properties:
- width: "100%"
- Height: "preferred"
- Insert the component in the Flex Container.
The component takes 100% width of the parent Flex Container. So, the width should be defined in the form UI elements.
APIs

Sets the term deposit products data which includes the product image, product description, error indicator(if any).
this.view.FundingAllocationPopup.setData(data)
Parameters:
data - mandatory
This contains the array of term deposit products. Refer to the example for sample data.
The following variables are to be set in the single term deposit product values:
- imgSrc: Term deposit product image
- title: The description of the product
- callback: A callback can be set to define what happens when the user clicks on the product.
- isError: A boolean value to set the error state
Example
var data = { sectionData : [ { imgSrc : "otherstate.png", title : "1 . Infinity Standard Certificate of Deposit", callback : this.onClickOfRoadmap, isError : false }, { imgSrc : "otherstate.png", title : "2 . Infinity Standard Certificate of Deposit", callback : this.onClickFunction, isError : false }, { imgSrc : "currentstate.png", title : "3 . Infinity Standard Certificate of Deposit", callback : this.onClickFunction, isError : false }, ], }; this.view.HorizontalRoadmap.setData(data);

Sets the error text and red dot over the term deposit products on which the error state is displayed. Refer to the example for sample data.
Parameters:
data (Object) - mandatory
The following are the keys that can be sent in otherData:
- text: The error text to be set to the component
- id: It is the array of the term deposit products which are needed to indicate the error state in them (red dot on the product image)
Example:
var errorData = { text : "Please cross validate the products and enter the right CD option’s value", id : [1,2] } this.view.HorizontalRoadmap.showError(errorData);

This contains the data for the single product that needs to be modified. Refer to the example for sample data.
Parameters:
data (Object) - mandatory
The following are the keys that can be sent in otherData:
- id: specifies the product id
- imgSrc: term deposit product image
- title: The description of the product
- callback: A callback can be set to define what happens when the user clicks on the product.
- isError: A boolean value to set the error state
Example
var data = { id:1, imgSrc : "numeringdone.png", title : "Infinity Standard Certificate of Deposit Modified", callback : this.onClickFunction, isError : false } this.view.HorizontalRoadmap.setModifiedData(data);
Callbacks
A callback is set as a part of data to term deposit products in setData API which specifies the onClick of the term deposit product.
In this topic