Skip to content
This repository has been archived by the owner on Jan 11, 2020. It is now read-only.

Latest commit

 

History

History
151 lines (127 loc) · 5.58 KB

README.md

File metadata and controls

151 lines (127 loc) · 5.58 KB
Raw

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

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:

Install

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.