SFDC4Students: Bind Record Using Wrapper Class in Component | Opportunity, Account and Contact List

Step 1 - Create Apex Class named OpportunityAccountContactController.

public class OpportunityAccountContactController {
    @AuraEnabled
    public static string getOppWithAccAndCon(String oppId){
        OpportunityAccountContactListWrapper oppAccConWrapper = new OpportunityAccountContactListWrapper();
        Opportunity oppRecord = [SELECT Id, Name, AccountId FROM Opportunity WHERE Id =: oppId limit 1];
        if(oppRecord.Id != null){
			string strAccId = oppRecord.AccountId;
			Account accList = [SELECT Id, Name, BillingState, Website, Phone,
                                 (SELECT Id, FirstName, LastName, Email From Contacts)
                                 FROM Account WHERE Id =: strAccId];			
			
			oppAccConWrapper.opportunityRecord = oppRecord;
            oppAccConWrapper.accRecord = accList;
            oppAccConWrapper.contactList = accList.Contacts;
            oppAccConWrapper.contactCount = accList.Contacts.size();
        }
        return json.serialize(oppAccConWrapper);
    }
    
    // wrapper class with @AuraEnabled and {get;set;} properties 
    public class OpportunityAccountContactListWrapper{
		@AuraEnabled
        public Opportunity opportunityRecord{get;set;}
        @AuraEnabled
        public Account accRecord{get;set;}
        @AuraEnabled
        public List<Contact> contactList{get;set;}
        @AuraEnabled
        public Integer contactCount{get;set;}
    }
}

Step 2 - Create Aura Component named OpportunityAccountContactComponent.

<aura:component controller="OpportunityAccountContactController"  implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">  
    <aura:handler name="init" value="{!this}" action="{!c.initData}"/>
    <!-- Attributes declaration--> 
    <aura:attribute name="opportunityAccountContactWrapper" type="object"/>
    <aura:attribute name="recordId" type="Id" />
    
    <div class="slds-p-around--large">
        <h1 style="font-size:25px;">{!v.opportunityAccountContactWrapper.opportunityRecord.Name}</h1> 
        <h1 style="font-size:15px;">{!v.opportunityAccountContactWrapper.accRecord.Name}</h1> 
        <br/>
        <p style="color:red">Total Contacts = {!v.opportunityAccountContactWrapper.contactCount}</p>
        
        <table class="slds-table slds-table--bordered slds-table--cell-buffer">
            <thead>
                <tr class="slds-text-title--caps">
                    <th scope="col">
                        <div class="slds-truncate" title="First Name">First Name</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="First Name">Last Name</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Email">Email</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.opportunityAccountContactWrapper.contactList }" var="con">
                    <tr>
                        <th scope="row">
                            <div class="slds-truncate" title="{!con.FirstName}">{!con.FirstName}</div>
                        </th>
                        <th scope="row">
                            <div class="slds-truncate" title="{!con.LastName}">{!con.LastName}</div>
                        </th>
                        <th scope="row">
                            <div class="slds-truncate" title="{!con.Email}">{!con.Email}</div>
                        </th>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
</aura:component>

Step 3 - Create Aura Component JavaScript Controller named OpportunityAccountContactController.

({
    initData: function(component, event, helper) {
        console.log('***Controller Called');
        helper.getAccountContactWrapperhelper(component, event, helper);
    },
})

Step 4 - Create Aura Component JavaScript Helper named OpportunityAccountContactHelper.

({
    getAccountContactWrapperhelper: function(component, event, helper) {
      console.log('***helper Called');
      var a= component.get("v.recordId");
      console.log('***In helper'+a);
      //call apex class method
      var action = component.get('c.getOppWithAccAndCon');
        action.setParams({
            oppId : component.get("v.recordId")
        });
      action.setCallback(this, function(response) {
        //store state of response
        var state = response.getState();
        if (state === "SUCCESS") {
          //set response value in wrapperList attribute on component.
          component.set('v.opportunityAccountContactWrapper', JSON.parse(response.getReturnValue()));
        }
      });
      $A.enqueueAction(action);
    },
})