The Avonni Tree presents hierarchical data in a user-friendly, expandable/collapsible tree for easy navigation.
Last updated
Was this helpful?
Select the Tree component on the canvas to access its properties in the Properties Panel (right panel).
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: Choose how the Tree's data is populated:
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.
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.
This section details the various configuration options available for the Avonni Tree component.
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.
These settings control how users interact with and select items in the tree.
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.
If enabled, displays the number of child items next to each parent node (e.g., "Accounts (5)").
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.
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.
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.
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.
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.