0

enter image description here

Hi everyone, I'm trying to display account fields in lightning component after selecting a account from accounts dropdownlist. I'm getting the error like

"'lightning:outputField' [Cannot read property 'fieldApiName' of null]".

Could anyone help me to resolve this issue

Component

<aura:component controller="AccountDetailsComponent"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
                access="global">
    <!-- handler -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <!-- attributes -->
    <aura:attribute name="accounts" type="List"/>
    <aura:attribute name="contactWrraperObj" type="Object"/>
    <!-- Account Dropdown section1 -->
    <div class="slds-size_4-of-12">
        <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
            <thead>
            <tr class="slds-text-heading_label">
                <th scope="col">
                    <div class="slds-truncate" title="Accounts">Accounts</div>
                </th>
            </tr>
            </thead>
            <tbody>
            <lightning:select label="Accounts" aura:id="accountName">
                <option value="" text="- None -"/>
                <aura:iteration items="{!v.accounts}" var="acc">
                    <option value="{!acc.Name}" text="{!acc.Name}"/>
                </aura:iteration>
            </lightning:select>
            </tbody>
        </table>
        <br/>
        <lightning:button label="Submit" class="slds-button_brand" onclick="{!c.contactsList }"/>
        <br/>
        <br/>
    </div>
    <br/>
    <br/>

    <!-- Details section2 -->
    <div class="slds-page-header">
        Account Details
        <div>
            <lightning:outputField fieldName="{!v.contactWrraperObj.accountObj.Name}"/>
            <lightning:outputField fieldName="{!v.contactWrraperObj.accountObj.Industry}"/>
            <lightning:outputField fieldName="{!v.contactWrraperObj.accountObj.Phone}"/>
        </div>
    </div>
    <!-- Related list section3 -->
    <div class="slds-page-header">
        Related Contacts
        <div>
            <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
                <thead>
                <tr class="slds-text-heading_label">
                    <th scope="col">
                        <div class="slds-truncate" title="ID">ID</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Name">Name</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Email">Email</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Phone">Phone</div>
                    </th>
                </tr>
                </thead>
                <tbody>
                <!-- Use the Apex model and controller to fetch server side data -->
                <aura:iteration items="{!v.contactWrraperObj.listContactObj}" var="contact">
                    <tr>
                        <th scope="row">
                            <div class="slds-truncate" title="{!contact.Id}">{!contact.Id}</div>
                        </th>
                        <td>
                            <div class="slds-truncate" title="{!contact.Name}">{!contact.Name}</div>
                        </td>
                        <td>
                            <div class="slds-truncate" title="{!contact.Email}">{!contact.Email}</div>
                        </td>
                        <td>
                            <div class="slds-truncate" title="{!contact.Phone}">{!contact.Phone}</div>
                        </td>
                    </tr>
                </aura:iteration>
                </tbody>
            </table>
        </div>
    </div>
</aura:component>

Controller.js

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

        var action = component.get('c.getAccountsList');
        action.setCallback(this, function (response) {
            component.set('v.accounts', response.getReturnValue());
        });

        $A.enqueueAction(action);
    },
    contactsList: function (component, event, helper) {

        var action = component.get('c.getContactDetail');
        var selectedAccountName = component.find('accountName').get('v.value');
        console.log(selectedAccountName);
        action.setParams({
            'accountName': selectedAccountName
        });
        action.setCallback(this, function (response) {
            component.set('v.contactWrraperObj', response.getReturnValue());
            console.log(contactWrraperObj);
        });
        $A.enqueueAction(action);
    }
});

Apex class:

public class AccountDetailsComponent {

    @AuraEnabled
    public static List<Account> getAccountsList() {
        List<Account> accts = [SELECT id, Name, Industry, Phone FROM Account LIMIT 10];
        return accts;
    }

    @AuraEnabled
    public static AccountWithContactWrapper getContactDetail(String accountName) {
        List<Contact> cons;
        Account accObj;
        if (accountName != '') {
            accObj = [SELECT Id, Industry, Phone, Name FROM Account WHERE Name = :accountName LIMIT 1];
            cons = [SELECT id, Name, Email, Phone FROM Contact WHERE AccountId = :accObj.Id];
        }
        AccountWithContactWrapper wrapperObj = new AccountWithContactWrapper();
        wrapperObj.accountObj = accObj;
        wrapperObj.listContactObj = cons;
        return wrapperObj;
    }

    public class AccountWithContactWrapper {
        @AuraEnabled
        public Account accountObj;

        @AuraEnabled
        public List<Contact> listContactObj;
    }
}

Thanks

0

if you would see the documentation for Lightning:outputField component, in fieldName attribute it requires the API name of the field which you want to display, but here in your component you are providing the value of the fields not there API names.

Moreover lightning:output field should also be aware of that for which record it's getting used i.e it must be wrapped in lightning:recordeditform or some other component having a record id so that it can display the particular field value of that record using the specified fieldName. So to display the Account details, I would suggest you to use ui:outputText component.

Documentations: Lightning:outputField -> https://developer.salesforce.com/docs/component-library/bundle/lightning:outputField/example

ui:outputText -> https://developer.salesforce.com/docs/component-library/bundle/ui:outputText/example

| improve this answer | |
0

Try using below

{!v.contactWrraperObj.accountObj.Name}
{!v.contactWrraperObj.accountObj.Industry}
{!v.contactWrraperObj.accountObj.Phone}

instead of

<lightning:outputField fieldName="{!v.contactWrraperObj.accountObj.Name}"/>
<lightning:outputField fieldName="{!v.contactWrraperObj.accountObj.Industry}"/>
<lightning:outputField fieldName="{!v.contactWrraperObj.accountObj.Phone}"/>

you can also use p or h tags as per your requirement lightning:outputField is used when working with LDS

| improve this answer | |

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.