Build a Tree View with Dynamic Record Details

Overview

This tutorial will use the Avonni Tree 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.

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.

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).

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.

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

Last updated 2 months ago

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.

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).

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.

Customize the Details:

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