[SalesForce] Getting data from Parent Component to child Component

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

Best Answer

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
}
Related Topic