0

I have parent and child components. I have reasons to keep child component as separate. I am trying to get the selected record information when I click any of the buttons(child component). Not sure what could be equivalent to event.target.parentNode.

Parent Component

<aura:iteration items="{!v.SECompanies}" var="company">
    <tr>
        <td> ***calling child component*****
         <c:Actions aura:id="actionCmp"/>        
        </td>
        <td>{!company.companyId}</td>
        <td>{!company.companyName}</td>
        <td>{!company.ultimateParentName}</td>
        <td>{!company.street1}</td>
        <td>{!company.address}</td>
    </tr>
</aura:iteration>

Child Component

<aura:component description="Actions">
    <aura:attribute name="seCompanyID" type="String"/>
    <aura:attribute name="seCompanyName" type="String"/>
    <div class="slds-media__figure">
        <button class="slds-button slds-button--icon" aria-haspopup="true">
            <lightning:icon iconName="action:new_opportunity" class="slds-is-open" size="xx-small" title="Create new Opportunity" /> |
        </button>
        <button class="slds-button slds-button--icon" aria-haspopup="true" onclick="{!c.createSEComp}">
            <lightning:icon aura:id="editSEComp" iconName="action:edit" class="slds-is-open" size="xx-small" title="Edit SECompany"/>
        </button>
    </div>
</aura:component>

Child controller

({
     createSEComp : function(component, event, helper){
            var temp1 = event.target.data; //how to get the selected record information here?
            console.log("component find is" +temp1);
     }
})

enter image description here

6
  • What do you want as record information? Commented Jul 25, 2017 at 7:11
  • I am looking to get all field values like Company Id, Company Name, Ultimate Parent Co etc.. I have this information in Parent component. But how do I pass that from Parent to child because no event involved in parent. Because in parent I am just invoking child component.
    – user28452
    Commented Jul 25, 2017 at 7:13
  • 1
    Then you could add a new attribute to the child component. The type of this attribute should be the type of your company variable. Then, just send the company variable related to the child component from your parent. Finally, access your attribute in your createSEComp method using for example : var companyId = component.get("v.company").companyId; Commented Jul 25, 2017 at 7:15
  • That is what I originally thought. But the challenge is in Parent component I do not have specific event to get the record information when user click on action buttons on a given row. <td> ***calling child component***** <c:Actions aura:id="actionCmp"/> </td>
    – user28452
    Commented Jul 25, 2017 at 7:18
  • Ok. Then you should read the documentation about Lightning events. You just have to pass the company Id to the child component. Then, in your child component, when the button is clicked, just raise your custom event with the company Id as param. Finally, you can handle the event in your parent component and you will be able to get the company Id clicked. Commented Jul 25, 2017 at 7:21

1 Answer 1

1

The comment by @Martin Lezer is the right answer, I post this so there is a complete answer with code:

On your parent component you should send the company object to each child component:

Parent Component

<aura:handler name="callParentEvent" event="c:ParentEvent" action="{!c.handleEventFromChild}"/>

<aura:iteration items="{!v.SECompanies}" var="company">
    <tr>
        <td><c:Actions aura:id="actionCmp" company="{!company}/></td>
    </tr>
</aura:iteration>

Now all company data would exist in the company attribute in your child component (just define the type same as in your parent).

Child Component Markup

<aura:component description="Actions">
    <aura:registerEvent name="callParentEvent" type="c:ParentEvent" />
    <aura:attribute name="company" type="same type as one record in the SECompanies array in your parent"/>
    <div class="slds-media__figure">
        <button class="slds-button slds-button--icon" aria-haspopup="true">
            <lightning:icon iconName="action:new_opportunity" class="slds-is-open" size="xx-small" title="Create new Opportunity" /> |
        </button>
        <button class="slds-button slds-button--icon" aria-haspopup="true" onclick="{!c.createSEComp}">
            <lightning:icon aura:id="editSEComp" iconName="action:edit" class="slds-is-open" size="xx-small" title="Edit SECompany"/>
        </button>
    </div>
</aura:component>

Child Component Controller

({
    createSEComp : function(component, event, helper){
        var company = component.get("v.company");

        // now you can use all of your company details
        var companyName = company.companyName;
        var companyId = company.companyId;
        // ....
        // if you want to update server you can do it here and inside the callback - call the parent event function callParent
    },

    // inform parent event from child
    callParent : function(component, event, helper){
        var event = component.getEvent('callParentEvent');
        event.fire();
    }
})

Now, For calling your parent, you need to:

  1. Create a Lightning event (I have called it ParentEvent) of type component:

Lightning Component Event: ParentEvent

<aura:event type="COMPONENT" description="Event to call parent" />
  1. On the child markup you need to register that event to be able to call it (also you name this registration callParentEvent to catch it in your helper and trigger it: <aura:registerEvent name="callParentEvent" type="c:ParentEvent" />

  2. On the child helper you need to triger it whenever you want: var event = component.getEvent('callParentEvent').fire();

  3. On your parent markup you need to listen to this event and call a method in your controller when it is triggered: <aura:handler name="callParentEvent" event="c:ParentEvent" action="{!c.handleEventFromChild}"/>

  4. On your parent controller you need a method to handle the triggered event:

Parent Controller

// catch the event from the child
handleEventFromChild : function(component, event, helper){
    // do some stuff
}
2
  • Thanks for your response. I will give it a try. I read somewhere that aura:Methods will be way to go then Lightning event as it could be expensive. Is that true?
    – user28452
    Commented Jul 26, 2017 at 10:52
  • Use aura:method mainly to call from parent to child, not from child to parent Commented Jul 26, 2017 at 11:05

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .