Formatted Name
The Avonni Formatted Name component displays personal name parts (salutation, first, middle, last, suffix) formatted for consistent presentation, with an optional avatar.
Overview
The Formatted Name component renders personal name fields — salutation, first name, middle name, last name, and suffix — in a configurable layout. Map each field to the corresponding Salesforce record field to pre-populate the display. An optional avatar can be shown alongside the name.
Configuration
To configure it, click the component on the Flow screen. The Edit Formatted Name Component panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.
Properties
Label — label for the component.
Help Text — help text for the component. Requires Label.
Variant — changes the position of the component and label: Standard, Label Hidden, Label Inline, Label Stacked, or Label Spread. Requires Label.
First Name — the value for the first name.
Format — the format used to display the name:
Short — first and last name (e.g. "John Doe").
Medium — adds the middle name (e.g. "John Middleton Doe").
Long — adds the salutation and suffix (e.g. "Mr. John Middleton Doe The 3rd Jo").
Informal Name — the value for the informal name.
Last Name — the value for the last name.
Middle Name — the value for the middle name.
Salutation — the value for the salutation, such as Dr. or Mrs.
Suffix — the value for the suffix, such as Jr. or Esq.
Avatar
Display an avatar alongside the formatted name. Configure its Icon Name (fallback icon), Image, Initials, shape (Variant — Circle or Square), Size, Position (left or right of the name), Presence Type and Presence Position indicator, and Alternative Text.
Styling
The Style tab gives you fine-grained control over the Formatted Name's appearance. Configure it from the Style tab of the Edit Formatted Name panel.
Controls outer spacing.
Top: Sets the top margin.
Right: Sets the right margin.
Bottom: Sets the bottom margin.
Left: Sets the left margin.
Controls inner spacing.
Top: Sets the top padding.
Right: Sets the right padding.
Bottom: Sets the bottom padding.
Left: Sets the left padding.
Customizes the border.
Color: Sets the border color.
Size: Sets the border width.
Style: Sets the border style (solid, dashed, etc.).
Radius: Sets the corner radius.
Sets the background.
Color: Sets the background color.
Linear Gradient: Applies a gradient background.
Styles the label text displayed above the name fields.
Color: Sets the label text color.
Font Size: Sets the label font size.
Font Style: Sets the label font style (normal, italic, etc.).
Font Weight: Sets the label font weight.
Styles the formatted name text.
Color: Sets the name text color.
Font Size: Sets the name font size.
Font Style: Sets the name font style (normal, italic, etc.).
Font Weight: Sets the name font weight.
Styles the optional avatar displayed alongside the name.
Border Color: Sets the avatar border color.
Border Size: Sets the avatar border width.
Border Style: Sets the avatar border style.
Initials Font Color: Sets the color of the initials text inside the avatar.
Initials Font Color Hover: Sets the initials text color on hover.
Initials Font Weight: Sets the font weight of the initials text.
Initials Font Weight Hover: Sets the initials font weight on hover.
Icon Background Color: Sets the background color of the icon fallback.
Icon Foreground Color: Sets the foreground color of the icon fallback.
Image Object Fit: Controls how the avatar image fits within its container.
Last updated
Was this helpful?