# Record Detail
***
## Tutorials
| Name | Description | Illustration |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [**Using the Record Detail with Reactivity**](https://docs.avonnicomponents.com/flow/tutorials/components/record-detail/using-the-record-detail-with-reactive-screens) | This tutorial shows setting up the Avonni Record Detail component to interact and synchronize with other flow components. | .png?alt=media\&token=a8365ed6-49b7-4e6b-ae7c-7400467c31fe) |
***
## Configuring the Record Detail
### Object Name attribute
This setting connects the Record Detail component to a specific object. By linking to an object name, the component understands which record fields to display, ensuring that the displayed information is sourced correctly from the designated object.
### Record ID attribute
In this section, you should specify the ID of the record whose field information you wish to display. The Record ID can be sourced from a variable or reactively from another component. For instance, you can display fields related to an account selected through a map marker in the Avonni Map component.
#### Displaying field information from a variable
#### Display field information using Reactivity from another component
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.
### Read Only attribute
When this option is enabled, the information displayed from the record fields will be non-editable, ensuring that the data remains in a view-only mode.
***
## Configuring the Layout
### Compact layout
Only the fields specified in the object's compact layout configuration will be displayed.
### Full layout
All fields defined in the page layout will be displayed.
### Custom layout
The custom layout option allows you to define the content and presentation of fields precisely within the Record Detail component. This highly flexible feature enables the addition of multiple fields either on the same line or within separate sections, catering to your specific display requirements.
#### ***How to create multiple columns***
To create multiple columns, drag a field and drop it next to an existing one on the same line.
{% 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 %}
#### *How to create a section*
To organize fields into a section, drag them into the area highlighted by a blue overlay, which appears when you hover your mouse over it. 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.
This allows you to neatly categorize fields and manage the display according to your preferences.
#### **Making Fields Required**
To ensure data completeness, you can easily designate required fields. 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. This provides a visual cue for users, ensuring that essential data is not overlooked.
***
## **🆕 Mode**
The Record Detail component offers two distinct modes for interacting with record data:
### **View Mode**
This mode presents record information in a read-only format, ideal for displaying details without allowing edits. If the "Read Only" attribute is not checked, users can easily switch to Edit mode by clicking a pencil icon next to each field. This provides a seamless transition between viewing and editing information.
### **Edit Mode**
Designed for efficient data modification, Edit mode renders record fields interactive input fields. This lets users modify record data directly within the component, streamlining the editing process.
***
## How to save the record information
This step is vital for the proper functioning of the Record Detail Component. It ensures that any information your users edit is accurately saved. Follow these instructions to set up the interaction:
1. Navigate to the **Interaction Tab**.
2. Click on the "**Add Save**" button.
3. From the available interactions, select "**Upsert Records**."
4. Click Save to finalize the setup.
{% hint style="info" %}
**Data Model Sharing:**
* **Respecting Org Settings:** The Avonni Components fully comply with your Salesforce organization's data-sharing configurations and access settings.
* **No Interference Policy:** These components do not alter or affect your pre-established data-sharing rules in any way.
* **Controlled Visibility and Access:** Your organization's defined sharing settings and user permissions govern your ability to view and interact with records through Avonni Components.
{% endhint %}
***
## Output Variables
The Record Detail exposes 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.
### Record Data
These variables give you access to the record displayed and any edits the user made.
| Output variable | Type | What it returns |
| ---------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Record** | Record (SObject) | The initial record loaded into the component. Use this to reference the original field values before any edits. |
| **Edited Record** | Record (SObject) | The record with the user's edits applied. Available after the user modifies fields in edit mode. Use this to save changes or compare with the original. |
| **Edited Record Serialized** | Text (String) | The edited record as a JSON string. Useful for passing to an Apex action that needs to process the changes. |
> **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.
### Button Clicks
These boolean variables track whether the user clicked the Save or Cancel buttons on the component.
| Output variable | Type | What it returns |
| ------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| **Button Save Clicked** | Boolean | Returns `true` if the user clicked the Save button. Use this in a Decision element to branch your flow based on whether the user saved or not. |
| **Button Cancel Clicked** | Boolean | Returns `true` if the user clicked the Cancel button. Use this to skip update logic or show a different screen when the user cancels. |
> **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.
.avif?alt=media&token=b019be1c-0728-4c08-b919-a118283cc36c)
.gif?alt=media&token=c4b17561-dfbe-4386-bc31-badfd833e06a)
.gif?alt=media&token=ee131ec7-9aaa-4740-bb2d-28edc8c041a0)
.gif?alt=media&token=e38803e9-b6ba-4293-aebe-f0fcbb3f40f9)
.gif?alt=media&token=fd056725-386a-4347-b684-c1b635925cb7)
.gif?alt=media&token=f1a128f7-be0c-406b-99ab-d3b4f62133a3)