1

I have a Engagement object with a custom field Account__c that has Name field. I want to show the name of the Account, but currently it shows the Id. How can I show the Account__c.Name rather than Id?

Apex Class Code:

public class EngagedAccountController {
    @AuraEnabled
    public static List<Engagement__c> getEngagedAccounts(Id oppId) {
        Volunteer_Opportunity__c opp = [Select Name, Support_Required__c FROM Volunteer_Opportunity__c WHERE id = :oppId];
        List<Engagement__c> engagedAccounts = [Select Name, Account__c FROM Engagement__c WHERE Volunteer_Opportunity__c = :opp.Id];
        return engagedAccounts;
    } 
}

Lightning Component Javascript:

({
    myAction : function(component, event, helper) {

        component.set("v.Columns", [
            {label:"Name", fieldName:"Name", type:"text"},
            {label:"Account", fieldName:"Account__c", type:"text"}
        ]);

        var action_get_engaged_accounts = component.get("c.getEngagedAccounts");
        action_get_engaged_accounts.setParams({
            oppId: component.get("v.recordId")
        });

        action_get_engaged_accounts.setCallback(this, function(data) {
            component.set("v.accounts", data.getReturnValue());
        });

        $A.enqueueAction(action_get_engaged_accounts); 
    }
})

Lightning Component Component:

<aura:component controller="EngagedAccountController" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >

    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="opportunity" type="Volunteer_Opportunity__c" />
    <aura:attribute name="accounts" type="Engagement__c" />
    <aura:attribute name="Columns" type="List" />

    <aura:handler name="init" value="{!this}" action="{!c.myAction}" />

    <force:recordData aura:id="accountRecord"
                      recordId="{!v.recordId}"
                      targetFields="{!v.opportunity}"
                      layoutType="FULL"
                      />

    <lightning:card iconName="standard:entitlement" title="{! 'Accounts engaged in this opportunity'}">
        <lightning:datatable data="{!v.accounts}" keyField="id" columns="{! v.Columns }" hideCheckboxColumn="true"/> 
    </lightning:card>

</aura:component>

How it looks currently: enter image description here

4

AFAIK the fieldName attribute of lightning:dataTable does not support dotted expressions that cross object boundaries such as Account__r.Name.

So the simplest fix is to add a formula field called "Account Name" of Account__r.Name to your Engagement__c object and query and reference that in the table.

PS

Or use this technique.

0

I had the same question and will have the same answer:

First of all you need to query the fields that you want to display, so in your SOQL query you should add Account__r.Name if you want to get the account name:

List<Engagement__c> engagedAccounts = [Select Name, Account__c, Account__r.Name FROM Engagement__c WHERE Volunteer_Opportunity__c = :opp.Id];

Second - your client controller will get the account data as nested json object, and for the lightning:datatable to handle all the fields, you need to flatten them, meaning:

json data from server (example):

{ "Id": a05S00000028b6aIAA, "Name": "Test Contact", "Account__r": { "Name": "Account Name", "Id": "001S000000pdfgdgf"} }

flattened json data (works for lightning:datatable)

{ "Id": a05S00000028b6aIAA, "Name": "Test Contact", "Account__r.Name": "Account Name", "Account__r.Id": "001S000000pdfgdgf"}

to flatten I use a method taken from here:

flattenRecord :function(data) {
    var result = {};
    function recurse (cur, prop) {
        if (Object(cur) !== cur) {
            result[prop] = cur;
        } else if (Array.isArray(cur)) {
            for(var i=0, l=cur.length; i<l; i++)
                recurse(cur[i], prop + "[" + i + "]");
            if (l == 0)
                result[prop] = [];
        } else {
            var isEmpty = true;
            for (var p in cur) {
                isEmpty = false;
                recurse(cur[p], prop ? prop+"."+p : p);
            }
            if (isEmpty && prop)
                result[prop] = {};
        }
    }
    recurse(data, "");
    return result;
}

You can add it just after you get the data from you server:

myAction : function(component, event, helper) {

    component.set("v.Columns", [
        {label:"Name", fieldName:"Name", type:"text"},
        {label:"Account", fieldName:"Account__r.Name", type:"text"}
    ]);

    var action_get_engaged_accounts = component.get("c.getEngagedAccounts");
    action_get_engaged_accounts.setParams({
        oppId: component.get("v.recordId")
    });

    action_get_engaged_accounts.setCallback(this, function(data) {
        var state = data.getState();
        if (component.isValid() && state === "SUCCESS") {
            var accounts = data.getReturnValue();
            accounts = helper.flattenRecord(accounts);
            component.set("v.accounts", accounts);
        }
    });

    $A.enqueueAction(action_get_engaged_accounts); 
}

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.