Formatted Address

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:

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