+ Start a Discussion
Michael Degn JensenMichael Degn Jensen 

Get Account details on Opportunity record

Hi all,

I trying to build a component to display on the Opportunity record page. I should contain some details of the related Account, like name, adresse, etc.
I am struggling to get the account ID passed to the controller. I know that the below code is not working because I'm calling the action with the v.opportunityRecord.AccountId before it is set.
But how do I get the Account ID from the opportunity and pass it to the function?

Component
<aura:component controller="AL_AccountDetailsController" implements="flexipage:availableForRecordHome,force:hasRecordId">
    <aura:attribute name="account" type="Account[]" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
	
    <aura:attribute name="opportunity" type="Object"
                    description="The record object to be displayed"/>
    <aura:attribute name="opportunityRecord" type="Object"
                    description="A simplified view record object to be displayed"/>
    <aura:attribute name="opportunityRecordError" type="String"
                    description="An error message bound to force:recordData"/>

    <force:recordData aura:id="record"
                      layoutType="FULL"
                      recordId="{!v.recordId}"
                      targetError="{!v.opportunityRecordError}"
                      targetRecord="{!v.opportunity}"
                      targetFields="{!v.opportunityRecord }"
                      mode="VIEW"/>

    <!-- Display a lightning card with details about the record -->
    <div class="Oppty Details">
        <lightning:card  title="{!v.opportunityRecord.Name}" >
            <div class="slds-p-horizontal--small">
                <p class="slds-text-heading--small">
                    <lightning:formattedText title="Account Id" value="{!v.opportunityRecord.AccountId }" />
                </p>
            </div>
        </lightning:card>
    </div>

    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.opportunityRecordError))}">
        <div class="recordError">
                {!v.opportunityRecordError}</div>
    </aura:if>
    <aura:if isTrue="{!not(empty(v.accountRecordError))}">
        <div class="recordError">
                {!v.accountRecordError}</div>
    </aura:if>
</aura:component>
Controller
({
    doInit : function(component, event, helper) {

        // Prepare the action to load account record
        var action = component.get("c.getAccount");
        action.setParams({"accountId": component.get("v.opportunityRecord.AccountId")});
        console.log('MDJ Account ID: ' + component.get("v.opportunityRecord.AccountId"));
        // Configure response handler
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(component.isValid() && state === "SUCCESS") {
                component.set("v.account", response.getReturnValue());
            } else {
                console.log('Problem getting account, response state: ' + state);
            }
        });
        $A.enqueueAction(action);
    }   
})
Apex Controller
public with sharing class AL_AccountDetailsController {
	@AuraEnabled
    public static Account getAccount(Id accountId) {
        // Perform isAccessible() checks here
        return [SELECT Name, BillingCity, BillingState, website FROM Account WHERE Id = :accountId];
    }
}

Thanks,
Michael
Khan AnasKhan Anas (Salesforce Developers) 
Hi Michael,

Greetings to you!

If you want to use the server controller then create a button and on button click, you will be able to get the record id of account.

But why do you want to use the server controller with force:recordData. You can use Lightning Data Service to load, create, edit, or delete a record in your component without requiring Apex code.
LDS is the Lightning Components counterpart to the Visualforce standard controller, providing access to the data displayed on a page. Without LDS, each component within an app makes independent calls to the server to perform CRUD operations on a record, even if all components in the app pull from the same record data. 

Please refer to the below links which might help you further.

https://trailhead.salesforce.com/en/content/learn/modules/lightning_data_service/lightning_data_service_manipulate_records

https://webkul.com/blog/forcerecorddata-in-lightning/

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Michael Degn JensenMichael Degn Jensen
Hi Khan

Thanks for your prompt reply.

The problem is that I first need to get the Opportunity Record ID (current Id of the page) and the find the associated Account ID. This is done by force:recordData (output is: v.opportunityRecord.AccountId).
However I am the struggling to use the AccountId to get details of that Account. I tried to use 2 instances of the force:recordData - first to find the Opportunity data and the second one to find Account data, but this was not working.

This is what I tried with 2 instances of force:recordData, where I am using {!v.opportunityRecord.AccountId} as the record ID of the Account. But this is not working.
<aura:component controller="AL_AccountDetailsController" implements="flexipage:availableForRecordHome,force:hasRecordId">
    <aura:attribute name="opportunity" type="Object"
                    description="The record object to be displayed"/>
    <aura:attribute name="opportunityRecord" type="Object"
                    description="A simplified view record object to be displayed"/>
    <aura:attribute name="opportunityRecordError" type="String"
                    description="An error message bound to force:recordData"/>

    <force:recordData aura:id="record"
                      layoutType="FULL"
                      recordId="{!v.recordId}"
                      targetError="{!v.opportunityRecordError}"
                      targetRecord="{!v.opportunity}"
                      targetFields="{!v.opportunityRecord }"
                      mode="VIEW"/>
    
    <aura:attribute name="account" type="Object"
                    description="The record object to be displayed"/>
    <aura:attribute name="accountRecord" type="Object"
                    description="A simplified view record object to be displayed"/>
    <aura:attribute name="accountRecordError" type="String"
                    description="An error message bound to force:recordData"/>

    <force:recordData aura:id="record"
                      layoutType="FULL"
                      recordId="{!v.opportunityRecord.AccountId}"
                      targetError="{!v.accountRecordError}"
                      targetRecord="{!v.account}"
                      targetFields="{!v.accountRecord }"
                      mode="VIEW"/>

    <!-- Display a lightning card with details about the record -->
    <div class="Oppty Details">
        <lightning:card  title="{!v.opportunityRecord.Name}" >
            <div class="slds-p-horizontal--small">
                <p class="slds-text-heading--small">
                    <lightning:formattedText title="Account Id" value="{!v.opportunityRecord.AccountId }" /></p>
                <p class="slds-text-heading--small">
                    <lightning:formattedText title="Account Id" value="{!v.account.Name}" /></p>
            </div>
        </lightning:card>
    </div>

    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.opportunityRecordError))}">
        <div class="recordError">
                {!v.opportunityRecordError}</div>
    </aura:if>
    <aura:if isTrue="{!not(empty(v.accountRecordError))}">
        <div class="recordError">
                {!v.accountRecordError}</div>
    </aura:if>
</aura:component>

 
Michael Degn JensenMichael Degn Jensen
The output of the component is this:
User-added image

It is showing the {!v.opportunityRecord.Name} and {!v.opportunityRecord.AccountId } but not {!v.account.Name}
Michael Degn JensenMichael Degn Jensen
Tried changing {!v.account.Name} to {!v.accountRecord.Name} but still no luck.
Ajay K DubediAjay K Dubedi
Hi Michael,

As for your requirement, I have updated your code. you can use the below code.

Component:-
<aura:component controller="AL_AccountDetailsController" implements="flexipage:availableForRecordHome,force:hasRecordId">
    <aura:attribute name="account" type="Account[]" />
    <!--aura:handler name="init" value="{!this}" action="{!c.doInit}" /-->
    
    <aura:attribute name="opportunity" type="Object"
                    description="The record object to be displayed"/>
    <aura:attribute name="opportunityRecord" type="Object"
                    description="A simplified view record object to be displayed"/>
    <aura:attribute name="opportunityRecordError" type="String"
                    description="An error message bound to force:recordData"/>

    <force:recordData aura:id="record"
                      layoutType="FULL"
                      recordId="{!v.recordId}"
                      targetError="{!v.opportunityRecordError}"
                      targetRecord="{!v.opportunity}"
                      targetFields="{!v.opportunityRecord }"
                      mode="VIEW"
                      recordUpdated="{!c.recordUpdate}"/>

    <!-- Display a lightning card with details about the record -->
    <div class="Oppty Details">
        <lightning:card  title="{!v.opportunityRecord.Name}" >
            <div class="slds-p-horizontal--small">
                <p class="slds-text-heading--small">
                    <lightning:formattedText title="Account Id" value="{!v.opportunityRecord.AccountId }" />
                </p>
            </div>
        </lightning:card>
    </div>

    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.opportunityRecordError))}">
        <div class="recordError">
                {!v.opportunityRecordError}</div>
    </aura:if>
    <aura:if isTrue="{!not(empty(v.accountRecordError))}">
        <div class="recordError">
                {!v.accountRecordError}</div>
    </aura:if>
</aura:component>

Controller:-
({
    recordUpdate : function(component, event, helper) {

        // Prepare the action to load account record
        var action = component.get("c.getAccount");
        action.setParams({"accountId": component.get("v.opportunityRecord.AccountId")});
        console.log('MDJ Account ID: ' + component.get("v.opportunityRecord.AccountId"));
        // Configure response handler
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(component.isValid() && state === "SUCCESS") {
                component.set("v.account", response.getReturnValue());
            } else {
                console.log('Problem getting account, response state: ' + state);
            }
        });
        $A.enqueueAction(action);
    }   
})


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com