Key Value List
This component is used to display multiple keys and values. It can be used in summary or acknowledgement screens.
Following are the various views of the Key Value List component:
- Desktop & tablet view
- Mobile view
Usage
Here are the steps to set the component in Quantum Visualizer:
- Open the Infinity Origination 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 and write the following code in the respective form Controller's onBreakPointChange function.
//this is form's onBreakpointChange definition onBreakpointChange(event,breakpoint){ this.view.keyValueList.onBreakpointChange(breakpoint); // calling component's OnBreakpointChange . . }
APIs
setData
This method is used to set data to the keyValueList component.
The keys should be i18n keys.
this.view.keyValueList.setData(data);
/*
sample data
{
"i18n.components.Name":"Tadepalli Venkataramana Preetish",
"i18n.components.Address":"Level-7, Building no:H06, Hitech City-2, Pheonix Infocity(SEZ), Gachibowli, Hyderabad, Telangana, 500081",
}
*/
getData
This method is used to get the data assigned to the component.
this.view.keyValueList.getData();
Field Name
|
Application/Table name
In this topic