+ Start a Discussion
Shweta Choudhary 17Shweta Choudhary 17 

How to display list of contacts, when I select one contact, it shoud display related opportunities with lightning component?

CharuDuttCharuDutt
Hii Shweta
Try Below Code
<aura:component controller="AccRelatedConC"
   implements="flexipage:availableForRecordHome,force:hasRecordId" access="global"  >
   <aura:attribute name="accList" type="List"/>
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   <aura:attribute name="activeSections" type="List" />
   <aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
   
   <div class="slds-border_bottom">
      <h1>Accounts</h1>
   </div>
   <div class="slds-scrollable_y">
      <div class="slds-text-longform">
         <lightning:accordion activeSectionName="{! v.activeSections }" onsectiontoggle="{! c.handleSectionToggle }">
            <div class="demo-only demo-only--sizing slds-grid slds-wrap">
               <div class="slds-size_1-of-2">
                  <div class="slds-box slds-box_x-small slds-text-align_left slds-m-around_x-small">
                     <aura:iteration items="{!v.accList}" 
                        var="acc">
                        <lightning:accordionSection name="{!acc.Name}" 
                           label="{!acc.Name}">
                           <div class="slds-scrollable" style="height:10rem;width:24rem">
                              <div class="slds-text-longform" style="width:150%">
                                 <lightning:tabset selectedTabId="one">
                                    <lightning:tab label="Contacts" id="one">
                                       <aura:iteration items="{!acc.Contacts}" var="con" indexVar="index">
                                          <li>Contact {!index + 1} Name : {!con.Name}</li>
                                          <li>Contact Phone :</li>
                                          <p>
                                             <lightning:formattedPhone value="{!con.Phone}"></lightning:formattedPhone>
                                          </p>
                                          <br></br>
                                       </aura:iteration>
                                    </lightning:tab>
                                    <lightning:tab label="Opportunities" id="two">
                                       <aura:iteration items="{!acc.Opportunities}" var="opp" indexVar="index">
                                          <li>Opportunities {!index + 1} Name : {!opp.Name}</li>
                                          <li>ID : {!opp.Id}</li>
                                          <br></br>
                                       </aura:iteration>
                                    </lightning:tab>
                                 </lightning:tabset>
                              </div>
                           </div>
                        </lightning:accordionSection>
                     </aura:iteration>
                  </div>
               </div>
            </div>
         </lightning:accordion>
      </div>
   </div>
</aura:component>

Controller
({
    doInit : function(component, event, helper) {
        helper.SearchHelper( component)
    },
        handleSectionToggle: function (component, event, helper) {
                var openSections = event.getParam('openSections');

        if (openSections.length === 0) {
            alert("All sections are closed");
        } else {
            alert(openSections);
        }

    }
})

Helper
({

    SearchHelper : function(component, event, helper) {
        var action = component.get('c.fetchAcc');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var allValues = response.getReturnValue();
                console.log("allValues--->>> " + JSON.stringify(allValues));
                //component.set('v.activeSections', allValues.Name);
                component.set('v.accList', allValues);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    }
                }
                else{
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
    }
});


Apex
public class AccRelatedConC {
  @AuraEnabled(cacheable=true)
    public static List<Account> fetchAcc (){
        String query= 'SELECT Id, Name,(select id,Name,AccountId from contacts Where AccountId != Null),'+
                '(select id,Name,AccountId from opportunities Where AccountId != Null) FROM Account';
         system.debug(Database.query( query ));
         return Database.query( query );
        
    }  
}
Please Mark It as Best Answer If It Helps
Thank You!
Movies BuddyMovies Buddy
Movies Buddy (https://www.moviesbuddy.live/) - Best website for 720p and 480p movie download