Tree

The Avonni Tree presents hierarchical data in a user-friendly, expandable/collapsible tree for easy navigation.

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:

Manual

Enter data directly into the component configuration.

Picklist

Retrieve data dynamically from a standard or custom picklist field within Salesforce.

Nested Queries

Fetch data from related Salesforce objects using subqueries, enabling complex data retrieval.

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.

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.

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.

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.

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.

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.

Show Item Count

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

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.

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