lightning-tree with Expand All and Collapse All in Salesforce Lightning Web Component

lightning-tree with Expand All and Collapse All in Salesforce Lightning Web Component

Sample Code:

Apex Class:

public class AccountController {
 
    @AuraEnabled(cacheable=true)
    public static List < Account > fetchAccounts() {

        return [
            SELECT Id, Name, Industry,
            ( SELECT Id, Name FROM Contacts )
            FROM Account LIMIT 5
        ];
        
    }
     
}

Lightning Web Component:

HTML:

<template>
    <lightning-card class="slds-m-around_medium">
        <div class="slds-m-around_medium">
            <lightning-button
                label="Expand All"
                onclick={clickToExpandAll}
                class="slds-m-around_medium">
            </lightning-button>
            <lightning-button
                label="Collapse All"
                onclick={clickToCollapseAll}
                class="slds-m-around_medium">
            </lightning-button>
        </div>
        <lightning-tree items={listItems} class="slds-m-around_medium">            
        </lightning-tree>
    </lightning-card>
</template>

JavaScript:

import { LightningElement, wire } from 'lwc';
import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';

export default class LightningTree extends LightningElement {
    
    listItems;

    @wire( fetchAccounts )
    accountTreeData( { error, data } ) {

        console.log( 'Inside wire' );

        if ( data ) {

            let tempData = JSON.parse( JSON.stringify( data ) );
            console.log( 'tempData are ' + JSON.stringify( tempData ) );
            let recs = [];

            for ( let i = 0; i < tempData.length; i++ ) {

                let rec = { label : tempData[ i ].Name, name : tempData[ i ].Id };
                let childRecs = [];
                let cons = tempData[ i ][ "Contacts" ];
                console.log( 'Contacts are ' + JSON.stringify( cons ) );

                if ( cons ) {

                    for ( let con of cons ) {

                        console.log( 'con is ' + JSON.stringify( con ) );
                        let conRec = { label : con.Name, name : con.Id };
                        childRecs.push( conRec );

                    }

                    console.log( 'childRecs are ' + JSON.stringify( childRecs ) );

                    if ( childRecs.length > 0 ) {
                        
                        rec.items = childRecs;

                    }

                }
                
                recs.push( rec );

            }

            console.log( 'Final Data ' + JSON.stringify( recs ) );
            this.listItems = recs;

        } else if ( error ) {
           
            if ( Array.isArray( error.body ) )
                console.log( 'Error is ' + error.body.map( e => e.message ).join( ', ' ) );
            else if ( typeof error.body.message === 'string' )
                console.log( 'Error is ' + error.body.message );

        }

    }

    clickToExpandAll( e ) {

        for ( let i = 0; i < this.listItems.length; i++ ) {

            this.template.querySelector('lightning-tree').items[ i ].expanded = true;

        }

    }

    clickToCollapseAll( e ) {

        for ( let i = 0; i < this.listItems.length; i++ ) {

            this.template.querySelector('lightning-tree').items[ i ].expanded = false;

        }
    }

}

JS-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Output:

Leave a Reply