Formatted Value
The Avonni Formatted Value component provides structured input and automatic formatting for consistently entering and displaying Salesforce data.
Overview
The Formatted Value component renders a single value in a type-specific format — text, number, date/time, phone, email, URL, badge, rich text, or lookup. It handles the formatting automatically based on the Type you select, so phone numbers display with separators, emails become clickable links, and badges display with color styling. Use it to display calculated, fetched, or captured data in a consistent, readable way anywhere in a flow.
When utilizing the 'Get Records' flow action, lookup values are not retrieved and, therefore, cannot be displayed using Avonni Formatted Value components. As a potential solution, consider creating a formula within the object to deliver the desired value.
Configuration
To configure it, click the component on the Flow screen. The Edit Formatted Value Component panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.
Properties
Label — text label displayed above the value.
Help Text — additional context shown via a tooltip (requires a label to be set).
Variant — controls the label position relative to the value: Standard, Label Hidden, Label Inline, Label Stacked, or Label Spread.
Type — determines the formatting behavior and which value input is used:
Text
Plain text display
Rich Text
HTML-formatted content
Number
Numeric values with optional formatting
Date
Date fields
Date Time
Date and time fields
Badge
A colored pill/chip — great for status values
Email addresses rendered as a mailto: link
Phone
Phone numbers with formatting
URL
Web addresses rendered as a clickable link
Lookup
Display a related record's name
Value — the data to format. The available value input adapts to the selected Type (for example, a date picker appears for Date, a number input for Number, and a text input for Text, Email, Phone, URL, Badge, Lookup, Rich Text, and Time).
Type Attributes — formatting and styling options specific to the selected type (for example, currency code for numbers, badge color for Badge).
Label Icon
Add an icon alongside the label text.
Label Icon Name
Lightning icon displayed next to the label
Label Icon Position
Left or Right of the label text
Label Icon Size
X-Small, Small, Medium, or Large
Value Icon
Add an icon alongside the formatted value.
Value Icon Name
Lightning icon displayed next to the value
Value Icon Position
Left or Right of the value
Value Icon Size
X-Small, Small, Medium, or Large
Styling
The Style tab gives you fine-grained control over the Formatted Value's appearance. Configure it from the Style tab of the Edit Formatted Value panel.
Controls the outer spacing around the component, creating space between it and other elements on the screen.
Top / Right / Bottom / Left: Adjust the space on each side of the component.
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: Set the border color.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Sets the component's background.
Color: Set the background color.
Styles the label text.
Color: Set the label text color.
Font Size / Font Style / Font Weight: Control the label typography.
Styles the value text.
Color: Set the value text color.
Font Size / Font Style / Font Weight: Control the value typography.
Last updated
Was this helpful?