# Tree
***
## Tutorials
| Name | Description | Illustration |
| ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | -------------------------------- |
| [**Build a Tree View with Dynamic Record Details**](/flow/tutorials/components/tree/build-a-tree-view-with-dynamic-record-details.md) | Interactive tree shows account details, dynamically updating on selection. |  |
## Configuring the Tree
### **Data Source**
Before using the List, you must decide where the data will come from. The Data Source setting determines how the list is created and what it displays.
| Data Source Type | Use Case | When to Use |
| ----------------------------------------------------------------------- | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [**Manual**](https://flow.avonnicomponents.com/data-sources/manual) | For a predefined set of items that don’t require dynamic updates. | Ideal for static content or rapid setup with specific items. |
| [**Picklist**](https://flow.avonnicomponents.com/data-sources/picklist) | Displaying a list of options defined in a Salesforce picklist. | Best for presenting a list of predefined options for selection. |
| [**Query**](https://flow.avonnicomponents.com/data-sources/query) | Fetching data based on a specific query, pulling various records or data points. | Ideal for complex data retrieval or when sourcing. Using a 'Get Records' collection is not necessary with this method, as the query itself is powerful enough to simplify your flow |
### Data Mappings
When using a dynamic data source like 'Query' or 'Picklist' for your Avonni Tree, the Data Mappings section becomes crucial. It bridges your Salesforce data and the tree structure, accurately representing your hierarchical data.
**Why are Data Mappings Important for Avonni Tree?**
Without data mappings, the Avonni Tree wouldn't understand how to organize your data into parent-child relationships. This could lead to a disorganized or flat tree structure, failing to convey the intended hierarchy.
**How Do Data Mappings Work for Avonni Tree?**
In the Data Mappings section, you'll define the connection between your Salesforce fields and the corresponding Avonni Tree attributes. This involves specifying:
* **Parent Item Label:** Choose the field that will be used as the name for the main items in your tree (e.g., "Account Name" if your tree is based on Accounts).
* **Other Attributes:** You can also connect other fields to additional features in the Avonni Tree, like "Metatext" (extra information displayed next to an item)
* **Adding Related Items to Your Tree (Optional)**
You can also display items related to the main items in your tree. To do this:
1. **Add an Item:** Click the "Add Item" button.
2. **Choose the Child Object:** Select the object's name that contains the related items you want to show (e.g., "Contact" if you will show contacts related to each account).
3. **Select the Relationship Field:** Choose the field that connects the child object to the parent object (e.g., "AccountId" on the Contact object).
4. **Map the Data:** Tell the Avonni Tree how to display the information for the related items, just like you did for the main items.
How to add items on your tree
By establishing these mappings, you ensure that each item in the Avonni Tree accurately displays the correct information from your Salesforce data and that the hierarchical structure reflects the relationships defined in your data model.
## Other Options
### **Header**
The text at the top of the tree serves as a title or label for the data.
### **Is Multi Select**
Enables users to select multiple items within the tree.
### **Independent Multi Select**
Allows multiple selections across different levels or branches of the tree without affecting selections in other areas.
### **Show Item Count**
Displays the number of child items next to each parent item in the tree.
***
## Interactions
The Tree supports one interaction event: **On Item Click**. It fires when a user clicks on any item in the tree — whether it's a parent node or a child node.
Open the [**Interactions**](/flow/component-builder/interactions-panel.md) tab in the Component Builder to configure what happens when an item is clicked.
### On Item Click
This event fires when the user clicks on a tree item. The clicked item's data (record, name, and object API name) becomes available as output variables for use in subsequent flow elements.
| Action | What it does | When to use |
| -------------------- | ------------------------------- | ------------------------------------------------------------------------------------ |
| **Flow Navigation** | Moves to the next screen | To navigate to a detail screen showing the clicked item's full record |
| **Open Flow Dialog** | Opens a sub-flow in a modal | To display record details or an edit form in a popup without leaving the tree screen |
| **Show Toast** | Displays a confirmation message | To confirm the selection (e.g., "Department selected: Marketing") |
| **Navigate** | Redirects to a Salesforce page | To open the clicked record's detail page directly in Salesforce |
| **Update Records** | Saves data to Salesforce | To update the clicked record immediately (e.g., mark a category as "Reviewed") |
{% hint style="info" %}
#### **Accessing the clicked item in your flow**
After the screen, three output variables are available on the Tree component:
* **Clicked Item** — the full Salesforce record the user clicked
* **Clicked Item Name** — the name of the clicked item
* **Clicked Item SObject Api Name** — the API name of the object (useful when the tree mixes multiple object types, like Accounts and Contacts)
{% endhint %}
{% hint style="info" %}
#### **Accessing selected items (multi-select)**
If **Is Multi Select** is enabled, the Tree also exposes **Selected Items** (record collection) and **Selected Item Names** (text collection) to retrieve all items the user checked.
{% endhint %}
***
## Output Variables
The Tree exposes several output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Tree component, and pick the output variable you need.
### Item Selection
When users select items in the Tree (with multi-select enabled), these variables update automatically.
| Output variable | Type | What it returns |
| ----------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| **Selected Items** | Record Collection (SObject\[]) | All currently selected items as a collection of Salesforce records. Use this to loop through selected records in a subsequent flow element. |
| **Selected Item Names** | Text Collection (String\[]) | The names of all selected items, as a list of strings. |
> **Example:** A user selects multiple categories in an Account hierarchy tree. Use a **Loop** element to iterate through **Selected Items** and create related records for each selected node.
### Item Clicks
When users click on a tree item, these variables tell you which item was clicked.
| Output variable | Type | What it returns |
| --------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Clicked Item** | Record (SObject) | The full Salesforce record of the tree item the user clicked. |
| **Clicked Item Name** | Text (String) | The name of the clicked item. |
| **Clicked Item SObject Api Name** | Text (String) | The API name of the Salesforce object associated with the clicked item. Useful when the tree contains items from multiple object types and you need to route logic accordingly. |
> **Example:** A user clicks on a department in an org chart tree. Use **Clicked Item** to display the department's details, and **Clicked Item SObject Api Name** to determine if the clicked node is a Department or a Team record.
### Component Metadata
| Output variable | Type | What it returns |
| ------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **Number of Items** | Integer | The total number of items currently loaded in the tree. Useful for displaying a count or making decisions when the tree is empty. |
---
# 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/flow-components/tree.md?ask=
```
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.