0

I am trying to create a lightning component that displays the hierarchy of any given account. The issue I am having is passing the query from a helper class to the component itself. Can some one review the short code below with me to figure out why it will not populate? I am using the Tree view approach.

Component:

<aura:component controller="AccountController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,force:hasSObjectName" access="global">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="gridColumns" type="List" />
<aura:attribute name="gridData" type="Object" />
<lightning:treeGrid columns="{! v.gridColumns }"
    data="{! v.gridData }"
    keyField="Name"
    aura:id="mytree"
/>

Component controller:

({
doInit: function (cmp, event, helper) {
    cmp.set('v.gridColumns', [
        {label: 'Account Name', fieldName: 'Name', type: 'text'},
        {label: 'Phone', fieldName: 'Phone', type: 'phone'},
        ]);
    helper.getAcctChildren(cmp);
}

})

Component Helper:

({
getAcctChildren : function (cmp) {
    var action = cmp.get("c.getAccountChildren");
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            var data = response.getReturnValue();
            //Change "Contacts" key to "_children"
            for(var i=0; i<data.length; i++) {
                data[i]._children = data[i]['Accounts'];
                delete data[i].Accounts;
            }
            cmp.set('v.gridData', data);
            cmp.set('v.recordId', Id);
        }
        // error handling when state is "INCOMPLETE" or "ERROR"
     });
     $A.enqueueAction(action);
}

})

Apex Class with Query to populate component:

public with sharing class AccountController {
@AuraEnabled
public static List<Account> getAccountChildren(){
    List<Account> accountchildren =
        [SELECT Id, Name, Phone, (SELECT Account.Name, Phone FROM ChildAccounts) FROM Account];
    return accountchildren;
}

}

The query returns valid results and the component with the column and row header is present, but no data.

0

I think it is just due to wrong index name. Replace following line of code with below one.

data[i]._children = data[i]['Accounts'];

By

data[i]._children = data[i]['ChildAccounts'];
3
  • Thank you for responding! I updated that, but still no dice. In any case, great catch! Oct 3 '19 at 14:37
  • Where are you testing the component? Oct 3 '19 at 17:37
  • in a sandbox environment Nov 5 '19 at 19:39
0

For anyone stuck on at least getting to to the first level this worked for me. I am now trying to work on making this dynamic but there is an app in the exchange that will beat me to this AiflyHierarchy.

Apex public with sharing class AccountController { @AuraEnabled public static List getAccountChildren(Id accountId){ List accountcontacts = [SELECT Id, Name, Phone, CommunityAccountName__c, (SELECT Account.Name, Phone, CommunityAccountName__c FROM ChildAccounts) FROM Account WHERE Id=:accountId ]; return accountcontacts; } }

Component

<aura:component controller="AccountController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,force:hasSObjectName" access="global">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="gridColumns" type="List" />
<aura:attribute name="gridData" type="Object" />
<aura:attribute name="recordId" type="Id" />

<lightning:treeGrid columns="{!v.gridColumns }"
    data="{!v.gridData}"
    keyField="Id"
    aura:id="mytree"
/>

Controller

({
doInit: function (cmp, event, helper) {
         cmp.set('v.gridColumns', [
        {label: 'Account Name', fieldName: 'Name', type: 'text'},
        //{label: 'Phone', fieldName: 'Phone', type: 'phone'},
        {label: 'URL', fieldName: 'CommunityAccountName__c', type: 'url'},
        ]);
    helper.getAcctContacts(cmp);
}

})

Helper

({
getAcctContacts : function (cmp) {
    var action = cmp.get("c.getAccountChildren");

    action.setParams({
        "accountId": cmp.get("v.recordId")
    });
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            var data = response.getReturnValue();
            //Change "Contacts" key to "_children"
            for(var i=0; i<data.length; i++) {
                data[i]._children = data[i]['ChildAccounts'];
                delete data[i].ChildAccounts;
            }
            cmp.set('v.gridData', data);
        }
        // error handling when state is "INCOMPLETE" or "ERROR"
     });
     $A.enqueueAction(action);
}})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.