# Build a Tree View with Dynamic Record Details

## Overview

This tutorial will use the [Avonni Tree](/flow/flow-components/tree.md) to show accounts and their related contacts. When you select an item on the left side of the tree, the record details on the right side will automatically update to show information about that specific item.

<figure><img src="/files/9IRsTWnLINRrRuyOgkJG" alt=""><figcaption></figcaption></figure>

## Step-by-Step Guide

### Step 1: Avonni Tree Configuration

* **Create the Layout:**
  * Start a new screen flow in Salesforce.
  * Add a "Section" element to the flow. This lets you put multiple components side-by-side.
  * We'll put our tree on the left and related information on the right.
* **Add and Configure the Avonni Tree:**
  * Drag the "Avonni Tree" component onto the left side of the section.
  * Give it a name (API Name).
  * Add a header if you want one at the top of the tree.
  * In the "Data Source" section:
    * Choose "Query Data Source".
    * Select the "Account" object. This is the main thing your tree will show.

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

* **Include Related Contacts:**
  * Click "Add an Item" to show contacts related to each account.
  * Select "Contact" as the child relationship object.
  * Choose "Account ID" as the relationship field (this connects contacts to their accounts).

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

* **Connect Salesforce Data to the Tree:**
  * In the "Data Mappings" section:
    * For the "Contact" object:
      * Choose which field you want to use as the label for each contact (e.g., "Full Name").
      * You can also add a "Metatext" to show extra info next to the contact's name (e.g., "Email").
    * For the "Account" object:
      * Do the same thing - choose the label field (e.g., "Account Name") and any metatext.
* **Preview Your Tree:**
  * You should now see a preview of your tree, showing accounts and their related contacts

### Step 2: Avonni Record Detail Conguration

* **Add the Record Detail Component:**
  * Drag the "Avonni Record Detail" component onto the right side of the section.
* **Choose the Object and Connect to the Tree:**
  * In the component settings, select "Contact" as the object name. This tells the component to display information about contacts.
  * For the "Record Id" field, select the Avonni Tree component you created in Step 1.
  * Then, choose the "clicked item name" attribute. This will automatically link the record details to whichever contact the user selects in the tree.

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

* **Customize the Details:**
  * Adjust the Record Detail component further to show the specific contact fields you want to display (e.g., Name, Email, Phone)


---

# Agent Instructions: 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/tutorials/components/tree/build-a-tree-view-with-dynamic-record-details.md?ask=<question>
```

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.