+ Start a Discussion
rishabh rathor 18rishabh rathor 18 

How to show list of related contacts on the selection of an account record From Drop Down picklist of accounts

Here It is my code:- 
==========Apex Controller===================
public class DropdownContrl {
     @AuraEnabled
    Public static String accountId{get;set;}
   
     @Auraenabled
  public static List<Account> getAccounts()
  {
      List<Account> accList = new List<Account>();
      accList = [SELECT Id, Name FROM Account];
      system.debug('Accounts '+accList);
            return accList;
  }
      @Auraenabled
     public static List<Contact> getContact(List<Id> accountIds)
  {
      System.debug('Acclount Id '+accountIds);
      List<Contact> conlst = new List<Contact>();
      conlst = [SELECT  FirstName, LastName,Email,Phone from Contact WHERE 
                                    accountId in : accountIds];
      system.debug('contacts '+conlst);
            return conlst;
  }
    }

=========Component=========
<aura:component controller="DropdownContrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
    <aura:attribute name="Accounts" type="List" />
    <aura:attribute name="Contacts" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doinit}" />
    <h2 class="slds-page-header__title">Display Account List</h2>
    <lightning:layout>
        <article class="slds-card slds-m-bottom_medium">
            <div class="slds-media__body">
                <div>
                    <lightning:layoutitem>
                        <lightning:select aura:id="act" name="selectAccount" >
                            <option value="" label="--None--">
                            </option>
                            <aura:iteration items="{!v.Accounts}" var="item" >
                                <option value="{!item.Id}" label="{!item.Name}" >
                                    {!item.Name}
                                </option>
                            </aura:iteration>
                        </lightning:select>
                    </lightning:layoutitem>
                </div>
            </div>
        </article>
    </lightning:layout>
    <div>
            <lightning:button label="Get Contacts" title="Neutral action" onclick="{! c.getcontacts }"/>

                <!--     <button  class="slds-button slds-button_brand" style="height:30px;width: 50px;" label ="Get Contacts" onclick="{!c.getcontacts}" ></button>-->

    </div>
     <h2 class="slds-page-header__title">Related Contacts</h2>
     <div  aura:id="ContactRecordViewController" class="slds"> 
        <table class="slds-table slds-table--bordered slds-table--striped">
            <thead>
                <tr>
                    <th scope="col"><span class="slds-truncate">First Name</span></th>
                    <th scope="col"><span class="slds-truncate">Last Name</span></th>
                    <th scope="col"><span class="slds-truncate">Email</span></th>
                    <th scope="col"><span class="slds-truncate">Phone</span></th>
                 
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.Contacts}" var="con" indexVar="index">
                    <tr>
                        <td data-index="{!index}">{!con.FirstName}</td>
                        <td data-index="{!index}">{!con.LastName}</td>
                        <td data-index="{!index}">{!con.Email}</td>
                        <td data-index="{!index}">{!con.Phone}</td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
</aura:component>
=============Helper==============
({
    fetchContacts : function(component, event, helper) {
        var action = component.get("c.getContact");
        console.log(action);
        var accountId = component.get("v.recordId");
        console.log(accountId);   
        action.setParams({
            accountIds: accountId
        });
        
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === 'SUCCESS') {
                var contactList = response.getReturnValue();
                component.set("v.Contacts",contactList);
                console.log(contactList);
            }
            else {
                alert('Error in getting data');
            }
        });
        $A.enqueueAction(action);
    },

})

=====================Js controller============

({
doinit : function(component, event, helper) {
    console.log('load');
    var action = component.get('c.getAccounts');
    action.setCallback(this, function(response){
            var result =response.getReturnValue();
            console.log(result);
            component.set("v.Accounts",result);
            console.log(result);
    });
    $A.enqueueAction(action);
},
     getcontacts : function(component, event, helper) 
    {
        
        helper.fetchContacts(component, event, helper);
    } ,
})
Best Answer chosen by rishabh rathor 18
Maharajan CMaharajan C
Hi Risabh,

Try the below changed Code: 

Apex Class:

public class DropdownContrl {
    
    @Auraenabled
    public static List<Account> getAccounts()
    {
        List<Account> accList = new List<Account>();
        accList = [SELECT Id, Name FROM Account];
        system.debug('Accounts '+accList);
        return accList;
    }
    @Auraenabled
    public static List<Contact> getContact(Id accountIds)
    {
        System.debug('Acclount Id '+accountIds);
        List<Contact> conlst = new List<Contact>();
        conlst = [SELECT  FirstName, LastName,Email,Phone from Contact WHERE 
                  accountId  =: accountIds];
        system.debug('contacts '+conlst);
        return conlst;
    }
}


=================


Component:

<aura:component controller="DropdownContrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
    <aura:attribute name="Accounts" type="List" />
    <aura:attribute name="Contacts" type="List" />
    <aura:attribute name="showContacts" type="Boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.doinit}" />

    <lightning:card title="Display Account">
    <lightning:layout>
        <article class="slds-card slds-m-bottom_medium">
            <div class="slds-media__body">
                <div>
                    <lightning:layoutitem>
                        <lightning:select aura:id="act" name="selectAccount" label="Select a Account">
                            <option value="" label="--None--">
                            </option>
                            <aura:iteration items="{!v.Accounts}" var="item" >
                                <option value="{!item.Id}" label="{!item.Name}" >
                                    {!item.Name}
                                </option>
                            </aura:iteration>
                        </lightning:select>
                    </lightning:layoutitem>
                </div>
            </div>
        </article>
    </lightning:layout>
    <div>
            <lightning:button label="Get Contacts" title="Neutral action" onclick="{! c.getcontacts }"/>

                <!--     <button  class="slds-button slds-button_brand" style="height:30px;width: 50px;" label ="Get Contacts" onclick="{!c.getcontacts}" ></button>-->

    </div>
     <aura:if isTrue="{!v.showContacts}">
     <h2 class="slds-page-header__title">Related Contacts</h2>
     <div  aura:id="ContactRecordViewController" class="slds"> 
        <table class="slds-table slds-table--bordered slds-table--striped">
            <thead>
                <tr>
                    <th scope="col"><span class="slds-truncate">First Name</span></th>
                    <th scope="col"><span class="slds-truncate">Last Name</span></th>
                    <th scope="col"><span class="slds-truncate">Email</span></th>
                    <th scope="col"><span class="slds-truncate">Phone</span></th>
                 
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.Contacts}" var="con" indexVar="index">
                    <tr>
                        <td data-index="{!index}">{!con.FirstName}</td>
                        <td data-index="{!index}">{!con.LastName}</td>
                        <td data-index="{!index}">{!con.Email}</td>
                        <td data-index="{!index}">{!con.Phone}</td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
   </aura:if>
    </lightning:card>
</aura:component>



====================

JS Controller:

({
doinit : function(component, event, helper) {
    console.log('load');
    var action = component.get('c.getAccounts');
    action.setCallback(this, function(response){
            var result =response.getReturnValue();
            console.log(result);
            component.set("v.Accounts",result);
            console.log(result);
    });
    $A.enqueueAction(action);
},
     getcontacts : function(component, event, helper) 
    {
        
        helper.fetchContacts(component, event, helper);
    } ,
})


=================


JS Helper:

({
    fetchContacts : function(component, event, helper) {
        //alert('act ==> ' + component.find('act').get('v.value') );
        var action = component.get("c.getContact");
        console.log(action);
        var accountId = component.find('act').get('v.value');
        console.log(accountId);   
        action.setParams({
            accountIds: accountId
        });
        
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === 'SUCCESS') {
                var contactList = response.getReturnValue();
                if(contactList.length > 0)
                {
                    component.set("v.showContacts",true);
                }
                else{
                    component.set("v.showContacts",false);
                }
                component.set("v.Contacts",contactList);
                console.log(contactList);
            }
            else {
                component.set("v.showContacts",false);
                alert('Error in getting data');
            }
        });
        $A.enqueueAction(action);
    },

})

Thanks,
Maharajan.C

All Answers

Maharajan CMaharajan C
Hi Risabh,

Try the below changed Code: 

Apex Class:

public class DropdownContrl {
    
    @Auraenabled
    public static List<Account> getAccounts()
    {
        List<Account> accList = new List<Account>();
        accList = [SELECT Id, Name FROM Account];
        system.debug('Accounts '+accList);
        return accList;
    }
    @Auraenabled
    public static List<Contact> getContact(Id accountIds)
    {
        System.debug('Acclount Id '+accountIds);
        List<Contact> conlst = new List<Contact>();
        conlst = [SELECT  FirstName, LastName,Email,Phone from Contact WHERE 
                  accountId  =: accountIds];
        system.debug('contacts '+conlst);
        return conlst;
    }
}


=================


Component:

<aura:component controller="DropdownContrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
    <aura:attribute name="Accounts" type="List" />
    <aura:attribute name="Contacts" type="List" />
    <aura:attribute name="showContacts" type="Boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.doinit}" />

    <lightning:card title="Display Account">
    <lightning:layout>
        <article class="slds-card slds-m-bottom_medium">
            <div class="slds-media__body">
                <div>
                    <lightning:layoutitem>
                        <lightning:select aura:id="act" name="selectAccount" label="Select a Account">
                            <option value="" label="--None--">
                            </option>
                            <aura:iteration items="{!v.Accounts}" var="item" >
                                <option value="{!item.Id}" label="{!item.Name}" >
                                    {!item.Name}
                                </option>
                            </aura:iteration>
                        </lightning:select>
                    </lightning:layoutitem>
                </div>
            </div>
        </article>
    </lightning:layout>
    <div>
            <lightning:button label="Get Contacts" title="Neutral action" onclick="{! c.getcontacts }"/>

                <!--     <button  class="slds-button slds-button_brand" style="height:30px;width: 50px;" label ="Get Contacts" onclick="{!c.getcontacts}" ></button>-->

    </div>
     <aura:if isTrue="{!v.showContacts}">
     <h2 class="slds-page-header__title">Related Contacts</h2>
     <div  aura:id="ContactRecordViewController" class="slds"> 
        <table class="slds-table slds-table--bordered slds-table--striped">
            <thead>
                <tr>
                    <th scope="col"><span class="slds-truncate">First Name</span></th>
                    <th scope="col"><span class="slds-truncate">Last Name</span></th>
                    <th scope="col"><span class="slds-truncate">Email</span></th>
                    <th scope="col"><span class="slds-truncate">Phone</span></th>
                 
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.Contacts}" var="con" indexVar="index">
                    <tr>
                        <td data-index="{!index}">{!con.FirstName}</td>
                        <td data-index="{!index}">{!con.LastName}</td>
                        <td data-index="{!index}">{!con.Email}</td>
                        <td data-index="{!index}">{!con.Phone}</td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
   </aura:if>
    </lightning:card>
</aura:component>



====================

JS Controller:

({
doinit : function(component, event, helper) {
    console.log('load');
    var action = component.get('c.getAccounts');
    action.setCallback(this, function(response){
            var result =response.getReturnValue();
            console.log(result);
            component.set("v.Accounts",result);
            console.log(result);
    });
    $A.enqueueAction(action);
},
     getcontacts : function(component, event, helper) 
    {
        
        helper.fetchContacts(component, event, helper);
    } ,
})


=================


JS Helper:

({
    fetchContacts : function(component, event, helper) {
        //alert('act ==> ' + component.find('act').get('v.value') );
        var action = component.get("c.getContact");
        console.log(action);
        var accountId = component.find('act').get('v.value');
        console.log(accountId);   
        action.setParams({
            accountIds: accountId
        });
        
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === 'SUCCESS') {
                var contactList = response.getReturnValue();
                if(contactList.length > 0)
                {
                    component.set("v.showContacts",true);
                }
                else{
                    component.set("v.showContacts",false);
                }
                component.set("v.Contacts",contactList);
                console.log(contactList);
            }
            else {
                component.set("v.showContacts",false);
                alert('Error in getting data');
            }
        });
        $A.enqueueAction(action);
    },

})

Thanks,
Maharajan.C
This was selected as the best answer
rishabh rathor 18rishabh rathor 18
Hi maharaja, How can we use accordian in vf page using slds. I m stucking with java script to open acordian section. Can you plz help me out . Thanks & Regards Rishabh rathor.