Tree
The Avonni Tree presents hierarchical data in a user-friendly, expandable/collapsible tree for easy navigation.
Overview
The Tree displays hierarchical data as an expandable and collapsible tree structure. Use it to browse org charts, account hierarchies, category trees, or any parent-child dataset — with optional multi-select so users can pick items for subsequent flow steps.
Tutorials
Interactive tree shows account details, dynamically updating on selection.
Configuration
To configure it, click the component on the Flow screen. The Edit Tree Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Data Source
The Data Source setting determines where the tree items come from.
Data Mapping
When using Query or Picklist, configure Data Mappings to tell the Tree which Salesforce fields map to which parts of each item. This is how the component knows what to show as the node label and how to build the parent-child hierarchy.
Key mapping fields:
Parent Item Label — the field used as the name for root items (e.g., "Account Name").
Metatext — additional information displayed next to an item.
Adding child items (related records):
You can also display items related to the main items in your tree.
Click the Add Item button.
Choose the child object (e.g., "Contact" to show contacts related to each Account).
Select the relationship field that connects the child to the parent (e.g., "AccountId").
Map the data — tell the Tree how to display the child items.
Properties
Header sets the text displayed as the tree heading.
Header Icon Name adds a Lightning Design System icon to the left of the header.
Header Icon Size sets the size of the header icon. Requires Header Icon Name to be set. Options: XX-Small, X-Small, Small (default), Medium, Large.
Header Image Source adds an image to the left of the header. If provided, it takes priority over the header icon.
Is Multi Select enables multiple item selection and displays a checkbox next to each node.
Independent Multi Select makes parent and child nodes selectable independently — selecting a parent does not automatically select its children, and vice versa. Requires Is Multi Select to be enabled.
Path Separator sets the string inserted between ancestors in the Selected Item Paths output. Defaults to " > ".
Show Item Count displays the number of child nodes in parentheses next to each parent node label.
Collapse Disabled keeps all branches expanded and prevents users from collapsing them.
Interactions
Interactions define what happens when users interact with the Tree. Configure them from the Interactions tab of the Edit Tree panel.
Item Click
Fires when the user clicks any tree node. Use this to navigate to a detail screen, pre-fill a form, or drive conditional logic based on the clicked item. The clicked node is available as the clickedItem, clickedItemName, and clickedItemSObjectApiName output variables after the screen.
Styling
The Style tab gives you fine-grained control over the Tree's appearance. Configure it from the Style tab of the Edit Tree panel.
Controls outer spacing.
Top: Space above the component.
Right: Space to the right of the component.
Bottom: Space below the component.
Left: Space to the left of the component.
Controls inner spacing.
Top: Inner space at the top.
Right: Inner space on the right.
Bottom: Inner space at the bottom.
Left: Inner space on the left.
Controls dimensions.
Width / Height: Fixed dimensions of the component.
Min / Max Width / Height: Constraints on how small or large the component can grow.
Overflow: How content behaves when it exceeds the component's bounds.
Adjusts display when opened as a modal dialog inside a Flow screen.
Width: Width of the dialog.
Height: Height of the dialog.
Background Color: Background color of the dialog.
Styles the optional header above the tree.
Color: Text color of the header.
Font Size: Size of the header text.
Font Style: Style of the header text (e.g., italic).
Font Weight: Weight of the header text (e.g., bold).
Styles the image displayed in the header.
Object Fit: How the image is sized within its container.
Height: Height of the header image.
Width: Width of the header image.
Styles individual tree nodes.
Header Background Color: Background color of the item header row.
Header Background Color Hover: Background color of the item header on hover.
Header Text Color: Text color of the item header.
Header Text Color Disabled: Text color of the item header when disabled.
Header Link Color: Color of links in the item header.
Header Link Color Hover: Color of links in the item header on hover.
Header Font Size: Font size of the item header text.
Header Font Style: Font style of the item header text.
Header Font Weight: Font weight of the item header text.
Metatext Text Color: Color of the metatext below the item label.
Metatext Disabled Text Color: Color of the metatext when the item is disabled.
Metatext Line Clamp: Maximum number of lines shown for the metatext.
Background Color Hover: Background color of the item row on hover.
Background Color Selected: Background color of the item row when selected.
Shadow Selected: Shadow applied to the item when selected.
Block Start: Spacing above the item header content.
Block End: Spacing below the item header content.
Inline Start: Spacing before the item header content.
Inline End: Spacing after the item header content.
Output Variables
The Tree exposes these 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 Click
Available after a user clicks any tree node (fires the Item Click interaction).
Clicked Item
Record (SObject)
The record behind the tree node the user clicked.
Clicked Item Name
Text (String)
The name (key) of the clicked node.
Clicked Item SObject Api Name
Text (String)
The API name of the Salesforce object associated with the clicked node (e.g., Account, Contact).
Example: A user clicks an Account node in an org-chart tree. Use Clicked Item to pre-fill an Account edit form on the next screen, and Clicked Item SObject Api Name to drive a decision element that routes to different screens depending on whether the clicked node is an Account or a Contact.
Item Selection
Available when Is Multi Select is enabled and a user selects one or more nodes.
Selected Items
Record Collection
All currently selected nodes as a collection of records.
Selected Item Names
Text Collection
The names (keys) of all currently selected nodes.
Selected Item Paths
Text Collection
The full ancestor path of each selected node, from root to node, joined by the configured separator (default " > ") — e.g. Europe > Western Europe > United Kingdom. Because the path reflects each node's position in the tree, duplicate names under different parents resolve to distinct paths.
Example: A user checks several product category nodes in a multi-select tree. Pass Selected Items to a downstream Create Records step to associate the chosen categories with a new opportunity.
Others
Number of Items
Integer
The total number of nodes currently loaded in the tree.
Flow Interaction Output Variables
Like all interactive Flow components, the Tree exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Last updated
Was this helpful?