September 7, 2020

lightning tree grid showing Account and its related Contacts and Opportunity in LWC in Salesforce

Sample Code:

HTML:


<template>
 
    <div class="slds-p-around_medium lgc-bg">

        <div class="slds-m-bottom_small">
            <lightning-button label="Expand All"
                              onclick={clickToExpandAll}>
            </lightning-button>
            <lightning-button label="Collapse All"
                              onclick={clickToCollapseAll}>
            </lightning-button>
        </div>

        <lightning-tree-grid columns={gridColumns}
                             data={gridData}
                             key-field="Id"
                             hide-checkbox-column=true>
        </lightning-tree-grid>
    </div>
 
</template>

JavaScript:

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

export default class Example extends LightningElement {

    @track gridColumns = [{
        type: 'text',
        fieldName: 'Name',
        label: 'Name'
    },
    {
        type: 'text',
        fieldName: 'Industry',
        label: 'Industry'
    },
    {
        type: 'text',
        fieldName: 'FirstName',
        label: 'FirstName'
    },
    {
        type: 'text',
        fieldName: 'LastName',
        label: 'LastName'
    },
    {
        type: 'text',
        fieldName: 'OpptyName',
        label: 'Opportunity Name'
    },
    {
        type: 'text',
        fieldName: 'StageName',
        label: 'Opportunity Status'
    }];
    @track gridData;

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

        console.log( 'Inside wire' );
        if ( data ) {

            let tempData = JSON.parse( JSON.stringify( data ) );

            for ( let i = 0; i < tempData.length; i++ ) {
                
                let cons = tempData[ i ][ "Contacts" ];
                delete tempData[ i ][ "Contacts" ];
                let childRecords = cons;
                let opps = tempData[ i ][ "Opportunities" ];

                for ( let opp in opps ) {

                    opps[ opp ].OpptyName = opps [ opp ].Name;
                    delete opps [ opp ].Name;
                    childRecords.push( opps[ opp ] );

                }

                delete tempData[ i ][ "Opportunities" ];                
                console.log( 'Child Records ' + JSON.stringify( childRecords ) );
                tempData[ i ]._children = childRecords;

            }

            console.log( 'Final Data ' + JSON.stringify( tempData ) );
            this.gridData = tempData;

        } 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 ) {
        const grid =  this.template.querySelector( 'lightning-tree-grid' );
        grid.expandAll();
    }

    clickToCollapseAll( e ) {
        const grid =  this.template.querySelector( 'lightning-tree-grid' );
        grid.collapseAll();
    }

}

Apex Class:

public with sharing class ExampleController {

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

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

Output:
 

 

No comments:

Post a Comment