Salesforce Lightning Tree Component (Deprecated)

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

About

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

Install the Lightning Tree component as a managed package by clicking on this button:

Documentation

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.

ui_tree:Tree

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

ui_tree:TreeSelectionEvent

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

Sample application & code

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 &amp; 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.