Formatted Address
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FO9dGXWWRPn2Rl17uQsRy%252FFormatted%2520Address.png%3Falt%3Dmedia%26token%3De9cc7c4c-0b96-440c-8383-2ac0ce196f65&width=768&dpr=4&quality=100&sign=5a7fa306&sv=1)
Overview
The Avonni Formatted Address Component is designed to simplify entering and displaying addresses in a standardized format while visually representing the location through an integrated static map. As users input various address components such as street name, city, postal code, and country, the component validates and formats the data in real-time and updates the accompanying static map to reflect the entered location.
Changing the properties
Configuring the Avonni Formatted Address Flow Screen Component is simple, allowing seamless integration with your Salesforce fields. Follow these steps to configure the component:
Label: Assign the desired label for the address field to provide context for users.
Street: Map the Salesforce field containing the street information to the component's Street attribute.
City: Connect the appropriate Salesforce field with the city data to the component's City attribute.
Province: Link the Salesforce field containing the province or state information to the component's Province attribute.
Postal code: Associate the Salesforce field with postal code data to the component's Postal Code attribute.
Country: Connect the Salesforce field containing the country information to the component's Country attribute.
Latitude: (Optional) Map the Salesforce field with the latitude value to the component's Latitude attribute for improved map accuracy.
Longitude: (Optional) Connect the Salesforce field with the longitude value to the component's Longitude attribute for enhanced map precision.
Locale: Set the component's locale to match your desired address formatting and language preferences.
Read-only: Enable this option if you want the address displayed without allowing users to modify the data.
Display a map: Toggle this feature to include an integrated static map with the entered address, visually showing the address.
Adding interactions
Interactions define what will happen when users click on an action. You can find a list of interactions that are available here.
Here are the available Actions for the Formatted Address Component:
On
Click
Specifications
Attributes
Name | Type | Description |
---|---|---|
Label | String | The Label for the Address |
Street | String | The Street detail for the Address |
City | String | The City detail for the Address |
Province | String | The Province detail for the Address |
Postal Code | String | The Postal Code detail for the Address |
Country | String | The Country detail for the Address |
Latitude | String | The Latitude detail for the Address |
Longitude | String | The Longitude detail for the Address |
Locale | String | The Locale detail for the Address |
Read Only | Boolean | If present, the address is displayed as plain text and cannot be clicked or focused on. |
Events
No Events are available
Styling Hooks
Container
Name | Description |
---|---|
Background Color | Define a background color for the container |
Border Color | Define a border color for the container |
Border Size | Define a border size for the container |
Border Style | Define a border style for the container |
Border Radius | Define a border radius for the container |
Address
Name | Description |
---|---|
Color | Define a text color for the Address |
Font Size | Define a font size for the Address |
Font Style | Define a font style for the Address |
Font Weight | Define a font weight for the Address |
Label
Name | Description |
---|---|
Color | Define a text color for the label text |
Font Size | Define a font size for the label text |
Font Style | Define a font style for the label text |
Font Weight | Define a font weight for the label text |
Last updated