+ Start a Discussion
tulasiram chtulasiram ch 

how to pass accountid to child compnent to display modal with related contactlist when a user clicks button on parent component

Child component is working fine , but  unable to pass parentid to child component. Please help me
Parent component:
  1. <aura:component controller="accountsWithContactsClass" implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:appHostable" access="global" >
  2.       <aura:attribute name="accounts" type="account[]"/>    
  3.     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
  4.      <aura:attribute name="selectedId" type="string"/>
  5.     <aura:attribute name="isTrue" type="account" default="false"/>
  6.    <table class="slds-table slds-table--bordered">
  7.         <tr>
  8.             <td> Name </td>
  9.             <td> Industry </td>
  10.             <td> Phone</td>
  11.             <td> CreatedDate</td>
  12.             <td> ContactList Button</td>
  13.          </tr> <b/>
  14.          <aura:iteration items="{!v.accounts}" var="accs1" >
  15.                <tr>
  16.                 <td> {!accs1.Name} </td>
  17.                 <td> {!accs1.Industry} </td>
  18.                 <td> {!accs1.Phone} </td>
  19.                 <td> {!accs1.CreatedDate}</td>
  20.                 <td> 
  21.                     <lightning:button value="{!accs1.Id}" variant="neutral" label="ContactList" onclick="{! c.handleClick }" /> 
  22.                   
  23.                    </td>
  24.                </tr><b/>
  25.          </aura:iteration>
  26.     </table >
  27.    <c:DisplayAccountswithContactsNested1 aura:id="compB" selectedAccount="{!v.selectedId}"/>
  28.    
  29. </aura:component>
Parent Controller:
  1. ({
  2.  
  3.  
  4.     doInit : function(component, event, helper) {
  5.         
  6.         var action =component.get("c.getAllAccounts");
  7.         console.log('The action value is: '+action);
  8.        
  9.         action.setCallback(this, function(a){ 
  10.  
  11.             component.set("v.accounts", a.getReturnValue());
  12.            //  console.log('The accs are :'+JSON.stringify(a.getReturnValue()));
  13.             console.log('The accs are :'+JSON.stringify(a.getReturnValue()));
  14.  
  15.         });
  16.         $A.enqueueAction(action);
  17.     },
  18.    
  19.     handleClick : function(component, event, helper) {
  20.         var accId = event.getSource().get("v.value");
  21.         component.set("v.selectedId",accId);
  22.        
  23.     },
  24. })
Child component:
  1. <aura:component controller="accountsWithContactsClass" implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:appHostable" access="global" >
  2.      <aura:attribute name="selectedAccount" type="string" />
  3.     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
  4.    <aura:attribute name="contacts" type="contact[]"/> 
  5.    
  6.     <aura:attribute name="isOpen" type="boolean" default="false"/>
  7.     <aura:attribute name="showSpinner" type="boolean" default="false"/>
  8.     <div class="slds-m-around--xx-large">
  9.         <lightning:spinner variant="brand" size="large" class="{!if(v.showSpinner,'slds-show','slds-hide')}"/>
  10.         <aura:if isTrue="{!v.isOpen}">
  11.         <div class="demo-only" style="height: 640px;">
  12.              <div role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large slds-list-builder" aria-labelledby="id-of-modalheader-h2" aria-modal="true" aria-describedby="modal-content-id-1">
  13.                  <div class="slds-modal__container">
  14.                      <div class="slds-modal__header" >
  15.                         <p class="conList">Contact List</p> 
  16.                                 </div>
  17.  
  18.                              <div class="slds-modal__content slds-p-around_medium" > 
  19.                                 <table class="slds-table slds-table--bordered"   >
  20.                                    <thead>
  21.                                         <tr class="slds-text-heading--label">
  22.                                           <th class="slds-cell-shrink">
  23.                                             <label class="slds-checkbox">
  24.                                               <input type="checkbox" name="options" />
  25.                                               <span class="slds-checkbox--faux"></span>
  26.                                               <span class="slds-assistive-text">Select All</span>
  27.                                             </label>
  28.                                           </th>
  29.                                         
  30.                                         
  31.                                         <td>ContacFirstName</td>
  32.                                         <td>Phone</td>
  33.                                         <td>CreatedDate</td>
  34.                                     </tr>
  35.                                   </thead>
  36.                                  <aura:iteration items="{!v.contacts}" var="cons" >
  37.                                   <tbody>
  38.                                    <tr class="slds-hint-parent">
  39.                                       <td class="slds-cell-shrink" data-label="Select Row">
  40.                                         <label class="slds-checkbox">
  41.                                           <input type="checkbox" name="options" />
  42.                                           <span class="slds-checkbox--faux"></span>
  43.                                           <span class="slds-assistive-text">Select Row</span>
  44.                                         </label>
  45.                                       </td>
  46.                                      <td>                               
  47.                                         <a  
  48.                                         href="{!'/one/one.app?#/sObject/'+ cons.Id + '/view'}" 
  49.                                         target="_blank">
  50.                                        {!cons.FirstName}
  51.                                       </a>
  52.                                       </td>
  53.                                       <td> {!cons.Email} </td>
  54.                                       <td> {!cons.Phone} </td>
  55.                                       <td> {!cons.CreatedDate}</td>
  56.                                      </tr>
  57.                                      </tbody>
  58.                                   </aura:iteration>
  59.                                       
  60.                                 </table>
  61.                              </div>
  62.  
  63.                               <div class="slds-modal__footer">
  64.                                <lightning:button variant="neutral" label="Close" onclick="{! c.closeModel }"/> 
  65.                                <lightning:button variant="neutral" label="LikenClose" onclick="{! c.likenClose }" />
  66.                               </div>
  67.                              </div>
  68.  
  69.                      </div>
  70.                    </div>
  71.                     <div class="slds-backdrop slds-backdrop_open"></div>
  72.                 </aura:if>
  73.  
  74.          </div>
  75. </aura:component>
Child Controller:
  1. ({
  2.     doInit : function(component, event, helper) {
  3.       component.set("v.showSpinner",true);
  4.         var accId = component.get("v.selectedAccount");
  5.         var action = component.get("c.getAllContacts");
  6.         action.setParams({
  7.             "ParentId": accId
  8.         });
  9.         action.setCallback(this, function(response){
  10.             var state = response.getState();
  11.             if (component.isValid() && state === "SUCCESS"){
  12.                 $A.log(response);
  13.                 component.set("v.contacts", response.getReturnValue());
  14.             }
  15.             else {
  16.                 console.log("Failed with state" + state);
  17.             }
  18.             component.set("v.showSpinner",false);
  19.         })
  20.         $A.enqueueAction(action);
  21.         component.set("v.isOpen", true);   // for Hide/Close Model,set the "isOpen" attribute to "Fasle" 
  22.     },
  23.     closeModel: function(component, event, helper) {
  24.         component.set("v.isOpen", false); // for Hide/Close Model,set the "isOpen" attribute to "Fasle"  
  25.         
  26.     },
  27.     likenClose: function(component, event, helper) {
  28.         alert('thanks for like Us :)');// Display alert message on the click on the "Like and Close" button from Model Footer 
  29.         // and set set the "isOpen" attribute to "False for close the model Box.
  30.         component.set("v.isOpen", false);
  31.     },
  32.     
  33. })
application:
  1. <aura:application extends="force:slds" >   
  2.     
  3.     <!--<c:DisplayAccountswithContactsNested1 selectedAccount="0012800000C7F3zAAF"/> -->
  4.     <c:displayAccountsWithContacts />
  5. </aura:application>
  6.  
  7. Apex class:
  8. public class accountsWithContactsClass {
  9.     @auraEnabled
  10.     public static list<account> getAllAccounts()
  11.     {
  12.      list<account> accs =[select id,name,phone,industry,CreatedDate from account limit 10];
  13.      return accs;
  14.     }
  15.     @auraEnabled
  16.     public static list<contact> getAllContacts(String ParentId)
  17.         {
  18.          list<contact> cons = [select id,firstname,phone,CreatedDate,Email,accountid,account.name from contact where accountid =: ParentId];
  19.          return cons;
  20.         }
  21. }
Please help me out from this........