1

Strange, but it seems the LWC Tree Grid component will only display fields on the object(s) queried, and not any values retrieved through a relationship (__r). I can't imagine why this would be - the values returned are parsed in JS anyway, and I don't see how they are any different from other fields. Anyone else discovered this?

This makes it virtually impossible to use them with junction objects!

<template>
    <lightning-card title="Success Criteria with Adapters">

        <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>
        
    </lightning-card>
</template>

JS

import {LightningElement, wire, api} from 'lwc';
import getSCsWithAdapts from '@salesforce/apex/OppTrackTree.SCsWithAdapts';

export default class SCsWithAdapts extends LightningElement {
    
    @api recordId; 
    gridData;
    gridColumns = [{
            type: 'text',
            fieldName: 'Use_Case__c',
            label: 'Use Case',
            
        },
        {
            type: 'text',
            fieldName: 'Use_Case_Status__c',
            label: 'Use Case Status',
            
        },
        {
            type: 'text',
            fieldName: 'Sales_Engineer__r.Name',
            label: 'Sales Engineer',
        },
        {
            type: 'text',
            fieldName: 'Use_Case_Category__r.Name',
            label: 'Category',
            
        },
        {
            type: 'text',
            fieldName: 'Adapter__r.Name',
            label: 'Adapter',
            
        },
    ];

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

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

    @wire(getSCsWithAdapts, {OppID: '$recordId'})
        SCsWithAdapts({data, error}) {
            if (data) {
                let parseData = JSON.parse(JSON.stringify(data));

                for (let i = 0; i < parseData.length; i++) {
                    parseData[i]._children = parseData[i]['POC_Success_Criteria_Adapters__r'];
                    delete parseData[i]['POC_Success_Criteria_Adapters__r'];
                }

                this.gridData = parseData;

            } else if (error) {
                console.log('error ====> ' + JSON.stringify(error));
            }
        }
}

Apex

public with sharing class OppTrackTree {
    
    @AuraEnabled(Cacheable=true)
    public static list<POC_Success_Criterion__c> SCsWithAdapts(String OppID){
        
        String strSOQL = 'SELECT Use_Case__c, Use_Case_Status__c, Sales_Engineer__r.Name, Sales_Engineer__c, Use_Case_Category__r.Name, Use_Case_Category__c, (SELECT Adapter__r.Name, Adapter__c FROM POC_Success_Criteria_Adapters__r) FROM POC_Success_Criterion__c WHERE Opportunity__r.Id = \''+OppId+'\'';
        
        return Database.query(strSOQL);  
    }
}

enter image description here

5
  • I linked a few examples for you, you can find more here on the site. Summary: lightning-datatable can't follow object references, so you need to "flatten" the data into a single layer for lightning-datatable to work.
    – sfdcfox
    Feb 9, 2021 at 15:26
  • @sfdcfox I'm not quite seeing the solution in those tickets, it seems they were using JSON as their data instead of a wire and SOQL query. By "flatten" do you mean I need to construct a wrapper class in my Apex instead of relying on the JS parser? JS isn't my strong suit unfortunately.
    – number41
    Feb 9, 2021 at 21:23
  • The point is, you can't reference related objects. You have to convert the reference to the top level. For example, if you had { "Contact": { "Name": "John Doe" } }, you would need to change it to { "ContactName": "John Doe" }, then reference that instead. Each of the examples linked show ways of doing this. You have to do this in JS, you can't just show the wire data directly. You could use a getter, a wire handler, etc, but some processing must be done.
    – sfdcfox
    Feb 9, 2021 at 23:09
  • @sfdcfox I see, but using a tree grid adds the extra dimension of the parent-child relationship. These examples deal with flat datatable examples, but how could we convert all references to the top level when there are inherently multiple levels (parent/child)?
    – number41
    Feb 10, 2021 at 3:12
  • What are you trying to do? Display the child record fields? You'd use a normalized, flat value, not specifying the relationship name.
    – sfdcfox
    Feb 10, 2021 at 3:28

0