International Address
This component can be used wherever a complete address is required as an input from users.
The component contains the following text fields:
- Address Line 1: This can mainly be the combination of the house number and the Street.
- Address Line 2: This is an optional field where you can add more information about the address.
- Country: Country field is a dropdown where a user can select the country from the dropdown while entering the data.
- State: It is also a dropdown field and can select the state from the options.
- City: This is the city field where the user enters the city value.
- Zip Code: In this field, the user is expected to enter the zip code.
Some basic data validation rules are configured for this component. For example, all the fields in the component expect Address Line 2 are mandatory fields.
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 and write the following code in the respective form Controller's onBreakPointChange function.
this.view.internationalAddress.onBreakpointChange(width); //width is the current breakpoint value
APIs
setDataToStateDropdown
Sets data to state dropdown.
this.view.internationalAddress.setDataToStateDropdown(data)
Data format
[{
lblCountryNameKA: "Telangana",
btnRowClick: {
"text": "-",
"onClick": this.stateRowClicked
}
}
]
setDataToCountryDropdown
Sets data to country dropdown.
this.view.internationalAddress.setDataToCountryDropdown(data)
Data format
[{
lblCountryNameKA: "India",
btnRowClick: {
"text": "-",
"onClick": this.stateRowClicked
}
}
]
validate
Verifies if all the mandatory fields are filled and displays an error message if any error occurs.
var isValid = this.view.internationalAddress.validate();
getAddress
Verifies if the address entered is valid and if it returns the complete address separated by commas.
var fullAddress = this.view.internationalAddress.getAddress();
getter methods
These methods individually return a specific address detail.
- getAddressLine1
var line1 = this.view.internationalAddress.getAddressLine1();
- getAddressLine2
var line2 = this.view.internationalAddress.getAddressLine2();
- getCountry
var country = this.view.internationalAddress.getCountry();
- getState
var state = this.view.internationalAddress.getState();
- getCity
var city = this.view.internationalAddress.getCity();
- getZipCode
var zipcode = this.view.internationalAddress.getZipCode();
setter methods
There are individual setter methods to set the data to the component textboxes
- setAddressLine1
var line1 = this.view.internationalAddress.setAddressLine1(newAdd);
- setAddressLine2
var line2 = this.view.internationalAddress.setAddressLine2(newAdd);
- setCountry
var country = this.view.internationalAddress.setCountry(newAdd);
- setState
var state = this.view.internationalAddress.setState(newAdd);
- setCity
var city = this.view.internationalAddress.setCity(newAdd);
- setZipCode
var zipcode = this.view.internationalAddress.setZipCode(newAdd);
mapErrorComp
Binds the sectionError component with the following code in the controller.
this.view.internationalAddress.mapErrorComp(errorWidget) // errorWidget is the setion level error component.
Callbacks
countryRowClickCallback
Invoked if a user clicks on the country dropdown. Set the callback by writing the following code in the preshow of the form.
this.view.internationalAddress.countryRowClickCallback = this.countryCallback; //countryCallback is a form level function
stateRowClickCallback
Invoked if a user clicks on the state dropdown. Set the callback by writing the following code in the preshow of the form.
this.view.internationalAddress.stateRowClickCallback = this.stateCallback; //stateCallback is a form level function
In this topic