You need to sign in to do that
Don't have an account?
tulasiram 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:
Parent component:
- <aura:component controller="accountsWithContactsClass" implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:appHostable" access="global" >
- <aura:attribute name="accounts" type="account[]"/>
- <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
- <aura:attribute name="selectedId" type="string"/>
- <aura:attribute name="isTrue" type="account" default="false"/>
- <table class="slds-table slds-table--bordered">
- <tr>
- <td> Name </td>
- <td> Industry </td>
- <td> Phone</td>
- <td> CreatedDate</td>
- <td> ContactList Button</td>
- </tr> <b/>
- <aura:iteration items="{!v.accounts}" var="accs1" >
- <tr>
- <td> {!accs1.Name} </td>
- <td> {!accs1.Industry} </td>
- <td> {!accs1.Phone} </td>
- <td> {!accs1.CreatedDate}</td>
- <td>
- <lightning:button value="{!accs1.Id}" variant="neutral" label="ContactList" onclick="{! c.handleClick }" />
- </td>
- </tr><b/>
- </aura:iteration>
- </table >
- <c:DisplayAccountswithContactsNested1 aura:id="compB" selectedAccount="{!v.selectedId}"/>
- </aura:component>
- ({
- doInit : function(component, event, helper) {
- var action =component.get("c.getAllAccounts");
- console.log('The action value is: '+action);
- action.setCallback(this, function(a){
- component.set("v.accounts", a.getReturnValue());
- // console.log('The accs are :'+JSON.stringify(a.getReturnValue()));
- console.log('The accs are :'+JSON.stringify(a.getReturnValue()));
- });
- $A.enqueueAction(action);
- },
- handleClick : function(component, event, helper) {
- var accId = event.getSource().get("v.value");
- component.set("v.selectedId",accId);
- },
- })
- <aura:component controller="accountsWithContactsClass" implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:appHostable" access="global" >
- <aura:attribute name="selectedAccount" type="string" />
- <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
- <aura:attribute name="contacts" type="contact[]"/>
- <aura:attribute name="isOpen" type="boolean" default="false"/>
- <aura:attribute name="showSpinner" type="boolean" default="false"/>
- <div class="slds-m-around--xx-large">
- <lightning:spinner variant="brand" size="large" class="{!if(v.showSpinner,'slds-show','slds-hide')}"/>
- <aura:if isTrue="{!v.isOpen}">
- <div class="demo-only" style="height: 640px;">
- <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">
- <div class="slds-modal__container">
- <div class="slds-modal__header" >
- <p class="conList">Contact List</p>
- </div>
- <div class="slds-modal__content slds-p-around_medium" >
- <table class="slds-table slds-table--bordered" >
- <thead>
- <tr class="slds-text-heading--label">
- <th class="slds-cell-shrink">
- <label class="slds-checkbox">
- <input type="checkbox" name="options" />
- <span class="slds-checkbox--faux"></span>
- <span class="slds-assistive-text">Select All</span>
- </label>
- </th>
- <td>ContacFirstName</td>
- <td>Phone</td>
- <td>CreatedDate</td>
- </tr>
- </thead>
- <aura:iteration items="{!v.contacts}" var="cons" >
- <tbody>
- <tr class="slds-hint-parent">
- <td class="slds-cell-shrink" data-label="Select Row">
- <label class="slds-checkbox">
- <input type="checkbox" name="options" />
- <span class="slds-checkbox--faux"></span>
- <span class="slds-assistive-text">Select Row</span>
- </label>
- </td>
- <td>
- <a
- href="{!'/one/one.app?#/sObject/'+ cons.Id + '/view'}"
- target="_blank">
- {!cons.FirstName}
- </a>
- </td>
- <td> {!cons.Email} </td>
- <td> {!cons.Phone} </td>
- <td> {!cons.CreatedDate}</td>
- </tr>
- </tbody>
- </aura:iteration>
- </table>
- </div>
- <div class="slds-modal__footer">
- <lightning:button variant="neutral" label="Close" onclick="{! c.closeModel }"/>
- <lightning:button variant="neutral" label="LikenClose" onclick="{! c.likenClose }" />
- </div>
- </div>
- </div>
- </div>
- <div class="slds-backdrop slds-backdrop_open"></div>
- </aura:if>
- </div>
- </aura:component>
- ({
- doInit : function(component, event, helper) {
- component.set("v.showSpinner",true);
- var accId = component.get("v.selectedAccount");
- var action = component.get("c.getAllContacts");
- action.setParams({
- "ParentId": accId
- });
- action.setCallback(this, function(response){
- var state = response.getState();
- if (component.isValid() && state === "SUCCESS"){
- $A.log(response);
- component.set("v.contacts", response.getReturnValue());
- }
- else {
- console.log("Failed with state" + state);
- }
- component.set("v.showSpinner",false);
- })
- $A.enqueueAction(action);
- component.set("v.isOpen", true); // for Hide/Close Model,set the "isOpen" attribute to "Fasle"
- },
- closeModel: function(component, event, helper) {
- component.set("v.isOpen", false); // for Hide/Close Model,set the "isOpen" attribute to "Fasle"
- },
- likenClose: function(component, event, helper) {
- alert('thanks for like Us :)');// Display alert message on the click on the "Like and Close" button from Model Footer
- // and set set the "isOpen" attribute to "False for close the model Box.
- component.set("v.isOpen", false);
- },
- })
- <aura:application extends="force:slds" >
- <!--<c:DisplayAccountswithContactsNested1 selectedAccount="0012800000C7F3zAAF"/> -->
- <c:displayAccountsWithContacts />
- </aura:application>
- Apex class:
- public class accountsWithContactsClass {
- @auraEnabled
- public static list<account> getAllAccounts()
- {
- list<account> accs =[select id,name,phone,industry,CreatedDate from account limit 10];
- return accs;
- }
- @auraEnabled
- public static list<contact> getAllContacts(String ParentId)
- {
- list<contact> cons = [select id,firstname,phone,CreatedDate,Email,accountid,account.name from contact where accountid =: ParentId];
- return cons;
- }
- }