Avonni Components for Flows
Components for Experience CloudGet It on the AppExchange
Search
⌃K
Links
Comment on page

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. 1.
    Label: Assign the desired label for the address field to provide context for users.
  2. 2.
    Street: Map the Salesforce field containing the street information to the component's Street attribute.
  3. 3.
    City: Connect the appropriate Salesforce field with the city data to the component's City attribute.
  4. 4.
    Province: Link the Salesforce field containing the province or state information to the component's Province attribute.
  5. 5.
    Postal code: Associate the Salesforce field with postal code data to the component's Postal Code attribute.
  6. 6.
    Country: Connect the Salesforce field containing the country information to the component's Country attribute.
  7. 7.
    Latitude: (Optional) Map the Salesforce field with the latitude value to the component's Latitude attribute for improved map accuracy.
  8. 8.
    Longitude: (Optional) Connect the Salesforce field with the longitude value to the component's Longitude attribute for enhanced map precision.
  9. 9.
    Locale: Set the component's locale to match your desired address formatting and language preferences.
  10. 10.
    Read-only: Enable this option if you want the address displayed without allowing users to modify the data.
  11. 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
Last modified 8mo ago