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:

1. Label: Assign the desired label for the address field to provide context for users.

2. Street: Map the Salesforce field containing the street information to the component's Street attribute.

3. City: Connect the appropriate Salesforce field with the city data to the component's City attribute.

4. Province: Link the Salesforce field containing the province or state information to the component's Province attribute.

5. Postal code: Associate the Salesforce field with postal code data to the component's Postal Code attribute.

6. Country: Connect the Salesforce field containing the country information to the component's Country attribute.

7. Latitude: (Optional) Map the Salesforce field with the latitude value to the component's Latitude attribute for improved map accuracy.

8. Longitude: (Optional) Connect the Salesforce field with the longitude value to the component's Longitude attribute for enhanced map precision.

9. Locale: Set the component's locale to match your desired address formatting and language preferences.

10. Read-only: Enable this option if you want the address displayed without allowing users to modify the data.

11. 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

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