Roadmap
This component shows the status of the application process.
Following are the various views of the Roadmap component:
- Desktop view
- Tablet & Mobile view
On click of the copy icon beside the Application Number, the string assigned gets copied to clipboard.
This component also contains responsive properties of the widgets within the component. Therefore, you don't need to explicitly assign the breakpoint values in every form for the component.
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, left and top as per design requirements
- height: "preferred"
- Insert the component in the Flex Container and write the following code in the respective form Controller's onBreakPointChange function.
this.view.Roadmap.onBreakpointChange(width);
APIs
setData
Sets the data and display it in the application seps. Use the following code in the form controller.
this.view.Roadmap.setData(data,headerData,copyStr); //data is the rows of application steps and HeaderData consists of the Overall status and Application started on date.
Below are the formats of data, headerData, and copyStr:
-
data:
[{ "rowLabel": < str >, "rowStatus": < "done","inProgress","incomplete" > , // default: "incomplete"* "currentRow": bool, // defalut: false* "onClick": < function > // default: undefined* }] -
headerData:
{ "lableStep":<str>, // Eg :"Application Status - Step 3/5", "labelStatus":<str>, // Eg : "Application: In progress", "lableStartDate":<str>, // Eg :"Application started on: 12/13/2019", }; -
copyStr: String to be copied on click of copy image
_getRowData
Retrieves the data of a particular row where rowData and RowNumber are specified.
var data = this.view.Roadmap._getRowData(rowData, rowNumber)
_getDoneRow
Retrives the data of the rows whose status is done.
var data = this.view.Roadmap._getDoneRow(rowData)
_getInProgressRow
Retrives the data of the rows whose status is in progress.
var data = this.view.Roadmap._getInProgressRow(rowData, rowNumber)
_getIncompleteRow
Retrives the data of the rows whose status is incomplete
var data = this.view.Roadmap._getIncompleteRow(rowData, rowNumber)
In this topic