Record Detail

The Avonni Record Detail component displays and optionally edits a single Salesforce record within your Dynamic Component. Use it to surface compact or full field layouts, allow inline or input-based editing, and capture save or cancel events.

Overview

The Record Detail component is designed to work with one Salesforce record at a time. Key features include:

• Multiple Layout Options: Display fields using standard Salesforce layouts (Compact or Full) or a fully Custom layout you define.
• View and Edit Modes: Control whether the fields are read-only or editable.
• Data Binding: The component automatically fetches and displays the record data based on a provided Record ID.
• Saving Changes: To save changes to Salesforce, use the interactions tab. Learn more.
• Conditional Visibility: The component supports conditional visibility.

Configuration

To configure the Record Detail, select it on the canvas. The Edit Record Detail panel opens on the right with two tabs: Properties and Interactions. The sections below mirror the Properties tab.

Properties

The top section of the panel contains the core settings for the component.

Object Name sets the API name of the Salesforce object whose record you want to display or edit (for example, Account, Contact, or My_Custom_Object__c).

Record ID identifies the specific record to display or update. Provide a 15- or 18-character Salesforce record ID. If left empty, the component creates a new record instead.

• On record pages, bind this to a record variable or use a $Component attribute if you have configured a Target Object Page.
• In other contexts, bind it to a Variable resource (for example, an ID coming from a URL parameter or another component).

Record Type selects the record type to use when creating a new record. If not provided, the default record type is used. Requires: Record ID is empty (new record mode only).

Read Only displays the record without enabling any edits when enabled.

Edit Mode controls how users edit the form fields. Requires: Read Only is not enabled.

• Inline (default) — users click directly on field values to edit them in place.
• Input — all fields render as input controls immediately.

Layout Type determines which field set to display:

• Full (default) — uses the object's page layout as defined in Salesforce Setup.
• Compact — uses the object's compact layout as defined in Salesforce Setup.
• Custom — lets you define exactly which fields appear and in which sections using the Edit Custom Layout editor.

The Custom View feature is not available at this time. We plan to include it in a future update

Edit Custom Layout opens a layout editor where you build sections and choose the fields to include. Requires: Layout Type = Custom.

Section Variant changes the appearance of the custom layout sections. Requires: Layout Type = Custom.

• Base (default) — standard section appearance.
• Shaded — sections display with a shaded background.

Density sets the arrangement style of fields and labels in the form.

• Comfy (default) — standard spacing between fields and labels.
• Compact — reduces spacing for a denser display.
• Auto — adapts density based on the available container width.

Fields Layout

The Fields Layout section controls how many columns the fields are arranged in, with responsive breakpoints for different container sizes.

• Number of Columns — columns per row in the smallest container (smaller than 480 px). Also acts as the fallback for all container sizes. Default: 1.
• Number of Columns Small Container — columns per row when the container is wider than 480 px. Default: 1.
• Number of Columns Medium Container — columns per row when the container is wider than 768 px. Default: 2.
• Number of Columns Large Container — columns per row when the container is wider than 1024 px. Default: 3.

Available values for all column settings: 1, 2, 3, 4, 6, or 12.

Set Component Visibility

All components support conditional visibility — see Component Visibility.

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 submits the form. The editedRecord and editedRecordSerialized output variables are populated with the draft field values at the moment of submission, and buttonSaveClicked is set to true. Use this interaction to save the record back to Salesforce or trigger downstream flow logic — see Saving Changes for a step-by-step guide.

Cancel

Fires when the user cancels an edit operation. The buttonCancelClicked output variable is set to true. Use this interaction to reset the form state or navigate the user away from the edit view.

Output Variables

The Record Detail exposes these output variables you can reference elsewhere on the page after the user interacts with it.

Form Submission

When the user submits the form, these variables are populated with the draft field values at the moment of save.

Output variable	Type	What it returns
Button Save Clicked	Boolean	true when the user submits the form.
Edited Record	Record (SObject)	The draft field values of the record at the time of submission.
Edited Record Serialized	Text (String)	The same draft values serialized as a JSON string. Useful for passing the record data to a Flow or Apex action.

Example: When a user clicks Save on a Contact form, use Edited Record to pass the updated field values to a Flow that writes them back to Salesforce.

Form Cancellation

Output variable	Type	What it returns
Button Cancel Clicked	Boolean	true when the user cancels an edit operation.

Others

Output variable	Type	What it returns
Record	Record (SObject)	The full Salesforce record loaded from the provided Record ID. Available as soon as the component finishes loading.