Formatted Address
What the Formatted Address Component Does
The Avonni Formatted Address Component makes it easy to enter and display addresses in a standard way, and it also shows you where that address is on a map.
As you enter the different parts of the address (street, city, postal code, country), the component automatically checks and formats the information. At the same time, it updates the map to show the location you're entering. This helps ensure accuracy and gives you a visual confirmation of the address.
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 showing the entered address visually.
Adding interactions
Interactions define what happens when users click on an action. A list of available interactions is available here.
Here are the available Actions for the Formatted Address Component:
On
Click
Specifications
Attributes
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
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
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
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
