# Tree

## Configuring the Tree Component

Select the Tree component on the canvas to access its properties in the Properties Panel (right panel).

### Basic Properties

* **API Name**: (Text) A unique identifier for this component instance (e.g., AccountHierarchyTree).
* **Header**: (Text, Optional) A title displayed above the tree. Example: "Account Hierarchy".
* **Is Multi Select**: (Boolean - Checkbox) If enabled, the user can select multiple items.
* **Independent Multi Select**: (Boolean - Checkbox) If enabled, users can select multiple items at different levels.
* **Show Item Count**: (Boolean - Checkbox) If enabled, the number of child for each node will be displayed.

### Data Source

Data Source: Choose how the Tree's data is populated:

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Manual</strong></td><td>Enter data directly into the component configuration.</td><td><a href="../component-builder/data-sources/manual">manual</a></td></tr><tr><td><strong>Picklist</strong></td><td>Retrieve data dynamically from a standard or custom picklist field within Salesforce.</td><td><a href="../component-builder/resources/variable">variable</a></td></tr><tr><td><strong>Nested Queries</strong></td><td>Fetch data from related Salesforce objects using subqueries, enabling complex data retrieval.</td><td><a href="../component-builder/data-sources/nested-queries">nested-queries</a></td></tr></tbody></table>

### Data Mappings

When using a dynamic data source, you must map fields from your data source to the Tree component's attributes. This tells the component how to display the data and structure the hierarchy.

{% hint style="warning" %}

## **Important Note for Query Data Source**

To use the "Query" data source, you *must* structure your query as a *nested query*, even if you only display a single level of data (i.e. even if there isn't a true parent-child relationship). The top level of the nested query represents your primary data, and you can optionally add child queries for more profound levels of the tree. This differs from a standard query.
{% endhint %}

{% hint style="warning" %}

## Note on Nested Query Steps

Please be aware that the interface and options for configuring **Nested Queries** have been updated since this tutorial was created. While the core concepts remain the same, the specific steps shown below may differ from those in the current Avonni Component Builder. We are working on updating this guide shortly to reflect the latest enhancements.
{% endhint %}

{% @arcade/embed flowId="kThBCDpa9aWmKcckM3dh" url="<https://app.arcade.software/share/kThBCDpa9aWmKcckM3dh>" %}

## Other Settings

This section details the various configuration options available for the Avonni Tree component.

### Header (Optional)

These settings control the appearance of an optional header area at the top of the Tree component.

**Header**: Text to display as the main header title.&#x20;

**Header Icon Name**: (Likely a Salesforce Lightning Design System (SLDS) icon name) Specifies an icon to display next to the header text. Example: utility:folder.&#x20;

**Header Image Source**: URL of an image to display in the header (instead of, or in addition to, the icon). Could be a static resource or a dynamically generated URL.

### Selection and Interaction

These settings control how users interact with and select items in the tree.

#### Is Multi Select

Users can select multiple tree nodes simultaneously (e.g., using checkboxes or Ctrl+Click) if enabled. If disabled, only single selection is allowed. Collapse Disabled: If true, it prevents users from collapsing expanded tree nodes. This forces all branches to remain open.&#x20;

#### Show Item Count

If enabled, displays the number of child items next to each parent node (e.g., "Accounts (5)").&#x20;

#### Collapse Disabled

It prevents users from collapsing expanded nodes in the tree. When set to `true`, all branches of the tree remain open, and the expand/collapse controls (typically chevrons or plus/minus icons) are either hidden or disabled.

***

## Interactions

### On Item Click

Define an interaction that triggers when a user *clicks* on a tree item. Common actions:

* **Navigate**: Go to the record detail page for the selected item.
* **Set Variable Value**: Store the selected item's `value` (usually its ID) in a Variable resource.
* **Execute Flow**: Launch a Flow, passing data from the selected item as input variables.
* **Show Toast**: Displays a message.

## Example: Displaying Related Contacts under Accounts

This example shows how to display a tree where Accounts are the parent nodes, and their related Contacts are the child nodes. This uses a **Nested Query** to retrieve both Accounts and Contacts efficiently.

### 1. Create a Nested Query

* **Add Query:** Add a new "Nested Query"
* **Parent Object:**
  * Select `Account` as the **Object**.ç
  * Add filters if needed
  * Do the Data Mappings with the Label and Metatext attribute
* **Child Object:**
  * Click "Add Child Object" by clicking on the little arrow next to the parent object name.
  * Select `Contact` as the **Object**.
  * Do the Data Mappings with the Label and Metatext attribute.

{% @arcade/embed flowId="ZLmn8KHIfrRXhg6Fmnsc" url="<https://app.arcade.software/share/ZLmn8KHIfrRXhg6Fmnsc>" %}

Now, the Tree component displays Accounts as parent nodes. Expanding an Account node reveals its related Contacts as child nodes.