Lightning Web Component Tree Example

Let us discuss here how to use the Lightning Web Component Tree. A lightning-tree component displays the visualization of a structural hierarchy, such as a sitemap for a website or a role hierarchy in an organization. Items are displayed as hyperlinks and items in the hierarchy can be nested. Items with nested items are also known as branches.

please refer this link to Lightning web component environment setup.

1.Create Apex Class 

Use the following SFDX command to create apex class

Here is the apex code

2.Create a Lightning Web Component 

Create a Lightning web component using the following SFDX command.

Here is the TreeEx3.html code

Here is the TreeEx3.js JavaScript controller code

Here are the TreeEx3.js-meta.xml configuration file


3. Push changes to scratch org. 

Push changes to scratch using this command and add this component to record page using lighting app builder.

After adding the lightning web component to record page using the app builder. you can able to see the tree as shown below