> 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/tutorials/components/record-detail/using-the-record-detail-with-reactive-screens.md).

# Using the Record Detail with Reactive Screens

## Introduction

This tutorial guides you through the [Avonni Record Detail component](/flow/flow-components/record-detail.md) setup, which is designed to work interactively with your screen flow. This means the Avonni Record Detail component can communicate and synchronize with other components you're working on within your flow.

For example, we'll demonstrate this interactivity using the Avonni Map component. We'll display a list of accounts on a map, and on the right side, the Avonni Record Detail component will be shown. This component will interact with the selected map marker, dynamically displaying the corresponding account information.

<figure><img src="/files/Y29QFnpZTExqckuyiRqF" alt=""><figcaption></figcaption></figure>

## Guided Steps

### Step 1: Avonni Map Configuration

Begin by placing the Avonni Map component within a section of your screen flow divided into two columns. Configure the map by selecting '[Query Data Source](/flow/component-builder/data-sources/query.md)' and applying it to the Account Object. For detailed guidance on setting up and using the Avonni Map, you can access specialized tutorials by clicking [here](/flow/tutorials/components/map.md)

<figure><img src="/files/jSvPodr5Fo9tg2UNqLXp" alt=""><figcaption></figcaption></figure>

### Step 2: Drag the Avonni Record Detail Component

Proceed by dragging the Avonni Record Detail Component into the adjacent column to the right of the Avonni Map Component. To customize this component, **open the Component Builder** where you'll find all the configuration options for the Avonni Record Detail.

<figure><img src="/files/4EvSY0VEufTSf22LnugT" alt=""><figcaption></figcaption></figure>

### Step 3: Avonni Record Detail configuration

#### Object Name

In this example, you should choose the Account object, as it's necessary to display fields related to the Account Object. Remember that we are utilizing Reactivity to select an account on the Avonni Map. Therefore, ensure that the fields displayed in the Record Detail component correspond to and are linked to the Account Object.

<figure><img src="/files/AewJ0F31iIF75uhmHPCp" alt=""><figcaption></figcaption></figure>

#### Record ID

For this step, it's crucial to establish a link between the record ID from the Avonni Map and the record ID in the Record Detail component. This ensures that accurate information is displayed and that there is a functional connection between the two components.

Here's how to set it up:

1. Choose the Avonni Map component from your list of components. Make sure to select it based on the API name you've assigned.
2. From the options, pick "Selected Marker SObject Value."
3. Then, choose "Account ID" from the subsequent options.

By doing this, the Record Detail component will automatically establish a connection with the Map, ensuring the data is synchronized and displayed correctly.

<figure><img src="/files/fYB9J4NWEqLgk5dEy8GT" alt="" width="162"><figcaption></figcaption></figure>

#### Layout Type

The "Layout Type" attribute in the Record Detail Component lets you select the preferred layout for displaying the fields. It determines the arrangement and presentation of the fields within the component.

### Compact

Only the fields specified in the object's compact layout configuration will be displayed.

### Full

All fields defined in the page layout will be displayed.

### Custom

The custom layout option allows you to define the content and presentation of fields precisely within the Record Detail component. [Learn more about the custom layout type](/flow/flow-components/record-detail.md#custom).

### Step 4: Define the Interaction

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.

That's it! You've successfully configured the interaction to ensure user-edited information is saved correctly.

<figure><img src="/files/QzzaTB2nXkhckgArtmZL" alt=""><figcaption></figcaption></figure>


---

# 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/record-detail/using-the-record-detail-with-reactive-screens.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.