> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/record-detail.md). # Record Detail ## 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**](/flow/tutorials/components/record-detail/using-the-record-detail-with-reactive-screens.md) | This tutorial shows setting up the Avonni Record Detail component to interact and synchronize with other flow components. | ![](/files/xtqpK8F2NpP8FXUdYdHI) | *** ## 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). | | **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. | {% hint style="info" %} The Record Detail component is responsive, automatically adjusting the layout of multiple fields in a column to fit the end-user's screen size. {% endhint %} **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 — 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](/flow/component-builder/interactions-panel.md) 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. {% tabs %} {% tab title="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. {% endtab %} {% tab title="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. {% endtab %} {% tab title="Border" %} Customizes the border. * **Color:** Border color. * **Size:** Border thickness. * **Style:** Border style (solid, dashed, dotted, etc.). * **Radius:** Corner rounding radius. {% endtab %} {% tab title="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. {% endtab %} {% tab title="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. {% endtab %} {% endtabs %} ## 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](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md). ## 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. *** --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/flow/flow-components/record-detail.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.