Formatted Address
The Avonni Formatted Address component displays a structured address — street, city, province, postal code, and country — with optional label, help text, locale formatting, geographic coordinates, read-only mode, and a static Google Map preview.
Overview
Use Formatted Address when you want to render a Salesforce address field cleanly within a Dynamic Component page, with support for map visualization and locale-aware formatting.
Configuration
To configure the Formatted Address, select it on the canvas. The configuration panel opens on the right. The sections below mirror the Properties panel from top to bottom.
Properties
Label
The label displayed above the address. Connect it to a Salesforce field or type a static string.
Helptext
A tooltip shown next to the label to provide users with additional context. Requires: Label to be set.
Variant
Controls the position of the label relative to the address. Requires: Label to be set. Options:
Standard (default) — label appears above the address.
Label Hidden — the label is not displayed.
Label Inline — the label appears to the left of the address on the same line.
Label Stacked — the label is stacked above the address.
Label Spread — the label and address are spread across the full width.
Street
The street line of the address.
City
The city portion of the address.
Province
The province or state portion of the address.
Postal Code
The postal or ZIP code of the address.
Country
The country portion of the address.
Latitude
The latitude of the location, if known. Values must be between -90 and 90. Providing latitude and longitude speeds up map rendering.
Longitude
The longitude of the location, if known. Values must be between -180 and 180. Providing latitude and longitude speeds up map rendering.
Locale
The locale used to format the address (for example, en-US). Defaults to en-US.
Read Only
When enabled, the address is displayed as plain text and cannot be clicked or focused on. Defaults to off.
Show Static Map
When enabled, a static Google Maps image of the location is displayed below the address. Defaults to off.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Styling
Configure the Formatted Address's appearance from the Style tab of the Edit Formatted Address panel.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Customizes the border surrounding the component.
Color / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.
Sets the horizontal alignment of the address text.
Text Alignment: Choose left, center, or right alignment.
Styles the component container.
Background Color: Set the container background color.
Styles the component's label.
Color / Font Size / Font Style / Font Weight: Set the label color and typography.
Styles the formatted address text.
Color / Font Size / Font Style / Font Weight: Set the address color and typography.
Last updated
Was this helpful?