0

enter image description here

I'm trying to display related contacts list in dropdown based on particular account selected from account dropdown.

I can able to display all accounts in dropdown but after selecting an acount how to filter contacts list related to that account.

Component:

                <aura:component controller="AccountDropdown">
                    <!--Declare Event Handlers--> 
                     <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>  
                    <!--  <aura:handler name="init" action="{!c.doInit1}" value="{!this}"/> -->
                    <!--Declare Attributes-->
                     <aura:attribute name="accountslist" type="list" />
                     <aura:attribute name="contactslist" type="list" />
                     <aura:attribute name="inputAccount" type ="String"/>

                     <ui:inputSelect label = "Account">
                        <aura:iteration items="{!v.accountslist}" var="acc">
                               <ui:inputSelectOption text="{!acc.Name}" label="{!acc.Name}" aura:id="inputAccount" />
                        </aura:iteration>
                     </ui:inputSelect> 
                    <br/>
                    <lightning:button label="Submit" class="slds-button_brand" onclick="{!c.processRelatedContacts }" /><br/><br/>
                     <ui:inputSelect label = "Contacts">
                        <aura:iteration items="{!v.contactslist}" var="con">
                               <ui:inputSelectOption text="{!con.Name}" label="{!con.Name}"/>
                        </aura:iteration>
                     </ui:inputSelect>     
                 </aura:component> 

Controller .js

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

         var action = component.get("c.getAccountList");
         action.setCallback(this, function(response) {
         component.set("v.accountslist", response.getReturnValue());

        });

        $A.enqueueAction(action); 
      },
        //Process the selected account
        processRelatedContacts: function(component, event, helper) {
         var action = component.get("c.getContactList");
         var inputId = component.find("inputAccount").get("v.value").id;  
         action.setParams({

             "accountId" : inputId

            });

         action.setCallback(this, function(response) {
         component.set("v.contactslist", response.getReturnValue());

        });
      }

    })

Apex Class

    public class AccountDropdown {

        public String accountId{get;set;}
        @AuraEnabled
        Public static List<Account> getAccountList(){
            //get all accounts list
            List<Account> accList = [SELECT Id, Name FROM Account];
            return accList;
        }    
        @AuraEnabled
        Public static List<Contact> getContactList(String accountId){
            //get all contacts list
            List<Contact> conList = [SELECT Id, Name FROM Contact WHERE id = : accountId];
            return conList;
        }   
    } 

Please anyone suggest some ideas to achieve this

  • What doesn't work? What's the error raised? – Martin Lezer Sep 19 '19 at 12:19
  • @MartinLezer please check the above screenshot with error details I attached. – Ravi Sep 19 '19 at 12:27
  • you miss the $A.enqueueAction(action) on processRelatedContacts() – Sarvesh Sep 19 '19 at 12:31
  • Thanks Martin it works.One small thing without clicking the button how can i automatically populate related contacts after selecting account – Ravi Sep 19 '19 at 12:45
  • @Raj did you add $A.enqueueAction(action) on processRelatedContacts() – Sarvesh Sep 19 '19 at 13:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.