Skip to content
This repository has been archived by the owner on Jan 11, 2020. It is now read-only.
/ sfdc-ui-tree Public archive

Salesforce Lightning Tree Component (Deprecated)

Notifications You must be signed in to change notification settings

pozil/sfdc-ui-tree

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Salesforce Lightning Tree Component (Deprecated)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published