Record Detail

The Avonni Record Detail provides a clean and customizable way to display multiple fields from a single record.

Overview

The Record Detail displays and optionally edits a Salesforce record directly within a Flow screen. It respects your org's field-level security, sharing rules, and page layout configurations — no extra permissions are required beyond what the running user already has.

---

Tutorials

Name	Description	Illustration
Using the Record Detail with Reactivity	This tutorial shows setting up the Avonni Record Detail component to interact and synchronize with other flow components.

---

Configuration

To configure it, click the component on the Flow screen. The Edit Record Detail Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

Properties

Setting	What It Does
Object Name	The API name of the Salesforce object whose record is displayed. This tells the component which fields are available.
Record ID	The ID of the record to display or edit. When empty, the component creates a new record instead. Source from a flow variable or reactively from another component's output.
Record Type	The record type to apply when creating a new record (only when Record ID is empty). Defaults to the object's default record type if not set.
Mode	How fields are rendered: Inline (view mode — click a pencil icon to edit individual fields) or Input (edit mode — all editable fields render as inputs immediately).
Read Only	When enabled, all fields are displayed in view-only mode regardless of the Mode setting.
Layout Type	Which fields to show: Full (default, all page layout fields), Compact (fields from the object's compact layout), or Custom (you define the sections and fields).
Show Record Type Layout Fields Only	Only when Layout Type is Custom. Restricts the custom layout to the fields that also appear on the page layout assigned to the record's record type. Leave off to show every field you placed.
Density	How fields and labels are spaced: Comfy (default), Compact, or Auto (adapts to container width).
Variant	Background style: Base or Shaded (default, adds a light gray background).
Save Button Label	Custom label for the Save button (leave blank to use the default "Save" label).
Cancel Button Label	Custom label for the Cancel button (leave blank to use the default "Cancel" label).

Setting the Record ID

The Record ID is the key input. You can source it from a flow variable or reactively from another component. For example, display the fields of an Account selected through the Avonni Map component's Selected Marker output.

In this scenario, we aim to showcase record details using the Record Id, which is derived from the 'Selected Marker' attribute of the Avonni Map component.

View Mode vs. Edit Mode

Fields Layout

The Fields Layout group controls how fields are arranged in responsive columns.

Setting	What It Does
Columns	Default number of field columns.
Small Container Columns	Column count when the component is in a small container.
Medium Container Columns	Column count when the component is in a medium container.
Large Container Columns	Column count when the component is in a large container.

The Record Detail component is responsive, automatically adjusting the layout of multiple fields in a column to fit the end-user's screen size.

Custom Layout — Creating Multiple Columns

To create multiple columns, drag a field and drop it next to an existing one on the same line.

Custom Layout — Creating Sections

To organize fields into a section, drag them into the area highlighted by a blue overlay. To add a title and make the section collapsible:

1. Hover over the section and click on the pencil icon on the right side of the blue overlay.
2. Enter a title for your section.
3. To collapse or expand the section, click the arrow icon on the right side of the section header.

Custom Layout — Showing Fields by Record Type

A custom layout normally shows every field you placed, whatever the record's record type. Turn on Show Record Type Layout Fields Only to restrict it to the fields that also appear on the page layout assigned to that record type.

This lets one custom layout serve several record types: place every field the object needs, and each record shows only the ones its record type uses.

Place mutually exclusive fields on the same row. When a field is hidden, the remaining fields on that row move up to fill the gap, but fields never move between rows. So put the per-record-type alternatives — State for US, Province for Canada — side by side on one row, and every record type gets a full row. Spread across separate rows, each record type leaves a gap where the other's field would be.

Salesforce assigns page layouts by record type and by profile, so the fields a user sees follow the assignment for their profile. On a record with no record type, the component falls back to the object's default page layout.

Custom Layout — Making Fields Required

When hovering over a field in the custom layout, a small asterisk icon (*) will appear. Click this icon to toggle the required field setting on or off.

---

Interactions

Interactions define what happens when users interact with the Record Detail. Configure them from the Interactions tab of the Edit Record Detail panel.

Save

Fires when the user clicks the Save button. Use this to upsert the edited record, navigate to a confirmation screen, or drive conditional logic based on the saved data.

Cancel

Fires when the user clicks the Cancel button. Use this to navigate back, skip update logic, or show a different screen.

---

Styling

The Style tab gives you fine-grained control over the Record Detail's appearance. Configure it from the Style tab of the Edit Record Detail panel.

Margin

Controls outer spacing.

• Top: Space above the component.
• Right: Space to the right of the component.
• Bottom: Space below the component.
• Left: Space to the left of the component.

Padding

Controls inner spacing.

• Top: Space between the top border and the content.
• Right: Space between the right border and the content.
• Bottom: Space between the bottom border and the content.
• Left: Space between the left border and the content.

Border

Customizes the border.

• Color: Border color.
• Size: Border thickness.
• Style: Border style (solid, dashed, dotted, etc.).
• Radius: Corner rounding radius.

Size

Controls dimensions.

• Width: Component width.
• Height: Component height.
• Min/Max Width: Minimum and maximum width constraints.
• Min/Max Height: Minimum and maximum height constraints.
• Overflow: How content is handled when it exceeds the component's bounds.

Flow Dialog

Adjusts display when opened as a modal dialog inside a Flow screen.

• Width: Dialog width.
• Height: Dialog height.
• Background Color: Dialog background color.

Output Variables

The Record Detail exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Record Detail component, and pick the output variable you need.

Button Clicks

When the user clicks Save or Cancel.

Output variable	Type	What it returns
Button Save Clicked	Boolean	true when the user clicked the Save button on this screen step.
Button Cancel Clicked	Boolean	true when the user clicked the Cancel button on this screen step.

Example: An employee onboarding flow lets HR edit a Contact record. After the screen, a Decision element checks Button Save Clicked — if true, the flow updates the record; if false, it skips to a confirmation screen.

Record Data

Output variable	Type	What it returns
Initial Record	Record (SObject)	The record object loaded from the given Record ID at the time the screen was shown.
Edited Record	Record (SObject)	The draft field values the user entered or changed before clicking Save. Use this in an Update Records element to persist the changes.
Edited Record Serialized	Text (String)	The same draft values as Edited Record, serialized as a JSON string. Useful for passing record data to an Apex action or checking for changes in a formula.

Example: A case management flow displays a Case record in edit mode. After the screen, use Edited Record in an Update Records element to save the agent's changes to Salesforce.

Flow Interaction Output Variables

Like all interactive Flow components, the Record Detail exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.

Troubleshooting Common Issues

• No access to the Avonni Components package — The running user has no Avonni Components package license assigned. Go to Setup → Installed Packages → Avonni Components → Manage Licenses and assign a license to the user.
• Record doesn't load — form is blank or shows "Record not found" — The Record ID input is empty or the user has no access to the record; an unset {!recordId} variable switches the form into create mode. Confirm {!recordId} is populated at the screen step and that the user has Read access through their profile and sharing rules.
• Saving fails with a red error message under one or more fields — Caused by a validation rule, a missing required field, or denied Edit FLS on the modified field. Read the field-level error, grant Edit FLS if it's a permission issue, or fix the validation rule / pre-fill the missing field earlier in the flow.
• Saving fails with "You can't save this record because the following fields are required" — The page layout includes required fields the user hasn't filled in, or a Custom layout is missing fields Salesforce requires for save. Fill the missing required field earlier in the flow, or rebuild the Custom layout to include every required field for the record type.
• Record Type setting is ignored — Record Type only applies when Record ID is empty (new record creation). When updating an existing record, Salesforce uses the record type already on the record. Leave Record Type unset when editing existing records.
• Custom layout shows no fields at all — Layout Type is set to Custom but no sections were configured. Open the layout editor and add at least one section with one field.
• Switching Mode to Input doesn't make fields editable — Read Only is toggled on, which overrides the Mode setting and forces every field into view-only display. Open the Properties tab and turn Read Only off.
• Edited Record output is empty after clicking Save — The user saved without changing any field, or Read Only is on in Input mode. Add a Decision element after the screen to handle the empty case, or use Edited Record Serialized to detect "no changes" reliably.
• User clicks Save but the record isn't updated in Salesforce — An Upsert Record interaction is wired on the Save event but its field assignments are incomplete or pointing to the wrong record ID. Either remove the interaction (the Record Detail saves on its own when none is wired) or finish wiring it with the correct record ID and field assignments.
• Lookup fields blank in Compact layout but visible in Full — The object's compact layout doesn't include those lookup fields. Edit the Compact Layout in Setup → Object Manager → [Object] → Compact Layouts to add the lookup fields, or switch to Full or Custom layout.
• Form is read-only even though Read Only is off — The user lacks Edit access on the object, or the page layout marks every field as read-only. Check the user's profile for Edit access on the object and review the page layout for fields set to Read-Only.

---