WARNING: this tree component is deprectated.
It is replaced by the official built-in lightning:tree component in Winter '18.
Table of Content
- About
- Install
- Documentation
- ui_tree:Tree
- ui_tree:TreeSelectionEvent
- Sample application & code
This is a generic tree component built using Salesforce Lightning.
This component is built with SLDS style and does not rely on third party libraries.
Features
The Lightning Tree component provides the following features:
- mobile-friendly multi-level tree
- selectable nodes/leaves handled by a lightning event
- configurable expansion/label properties that allow to represent any type of objects
- configurable default expansion level
Install the Lightning Tree component as a managed package by clicking on this button:
Component is documented using the Aura documentation. You can access it from this URL (replace the domain): https://<YOUR_DOMAIN>.lightning.force.com/auradocs/reference.app#reference?descriptor=ui_tree:Tree&defType=component
You can also find the documentation below.
The Lightning Tree component is invoked as a ui_tree:Tree component with the following attributes:
| Name | Type | Required | Description |
|---|---|---|---|
header |
String | No | An optional text header |
items |
List | Yes | The tree data |
config |
Object | No | An optional tree configuration, see below for more details |
This component is configured via a JSON object placed in its config attribute. It supports the following properties:
| Name | Type | Description | Default |
|---|---|---|---|
labelProperties |
[String] | Properties used for retrieving node/leaf label. The first available property in the list will be used. | ['Name'] |
expandProperties |
[String] | Properties used for retrieving node children. No children will be fetched by default. | [] |
expandLevel |
Integer | Number of tree levels expanded by default. | 1 |
isSelectable |
Boolean | Whether this tree supports user selection. If enabled, selection is captured by a ui_tree:TreeSelectionEvent event. See below for more details on this event. |
false |
isNodeSelectionEnabled |
Boolean | Whether tree nodes can be selected. If false, only leaves can be selected. | false |
When selection is allowed by the config attribute of the ui_tree:Tree component, a ui_tree:TreeSelectionEvent Lightning event will be thrown when the user selects a tree node or leaf.
The event has the following attribute:
| Name | Type | Description |
|---|---|---|
selection |
Object | Data associated with the selected tree node/leaf |
Check out the sample application or this simplified code sample.
The following example displays a tree containing accounts and their contacts.
<aura:attribute name="treeHeader" type="String" default="Accounts & Contacts"/>
<aura:attribute name="treeItems" type="List"/>
<aura:attribute name="treeConfig" type="Map" default="{'labelProperties': ['Name'], 'expandProperties': ['Contacts'], 'isSelectable': true, 'isNodeSelectionEnabled': true, 'expandLevel': 1}" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler name="treeSelectionEvent" event="ui_tree:TreeSelectionEvent" action="{!c.handleTreeSelection}"/>
<ui_tree:Tree header="{!v.treeHeader}" items="{!v.treeItems}" config="{!v.treeConfig}" />Data is loaded by the doInit controller method (not shown) and stored in the treeItems attribute.
The labelProperties configuration searches for "Name" properties in the treeItems object to display labels. The expandProperties configuration searches for "Contacts" properties to fetch node children.
The tree supports user selection for both nodes and leaves. Selection is captured by the TreeSelectionEvent event and handled by the handleTreeSelection controller method (not shown).
In this example, the tree will be collapsed by default thanks to the expandLevel configuration.