[SalesForce] Salesforce Lightning: How to save attribute values of a child component in a parent component when a button on the parent component is clicked

I have a parent component which iterates over a child component and has a save button.
Parent.cmp:

 <aura:attribute name="casAgentList" type="Availability_Of_CAS_OneMDCS__c[]"/>
 ...
 <tbody>
            <aura:iteration items="{!v.casAgentList}" var="item">
                <c:childComp appo="{!item}"/>
                <br/>
            </aura:iteration>               
        </tbody>  
...
<lightning:button variant="brand" onclick="{! c.saveRecord }" > Save </lightning:button>

Next the child component displays a table.
child cmp:

<aura:attribute name="appo" type="Availability_Of_CAS_OneMDCS__c"/>
<aura:attribute name="availableList" type="List"/>
<aura:attribute name="starttimeList" type="List"/>
<aura:attribute name="endtimeList" type="List"/> 
<aura:attribute name="isstartdisable" type="Boolean" default="true"/>
<aura:attribute name="isenddisable" type="Boolean" default="true"/>
<aura:attribute name="iscommentdisable" type="Boolean" default="true"/>

<aura:handler name="init" value="{!this}" action="{!c.myAction}"/>
 <tr>
    <td>
        {!v.appo.CAS_Team_OneMDCS__r.Name}
    </td> 
    <td style="padding-right: 5px;">
       <lightning:select name="{!v.appo.Id}" onchange="{!c.dorefresh}" aura:id="firstpicklistid">
            <Option text="--None--" value="--None--" disabled="true"/>
            <option value="{!v.appo.Availability__c}" text="{!v.appo.Availability__c}"> </option>

            <aura:iteration items="{!v.availableList}" var="inneritem">
                <aura:if isTrue="{! notequals(v.appo.Availability__c,inneritem) }">
                    <option value="{!inneritem}" text="{!inneritem}"></option>
                </aura:if>                                    
            </aura:iteration>
        </lightning:select> 

    </td>
 ...

Next the child controller has the definition for myaction and do refresh function.
child controller:

myAction : function(component, event, helper) {

    console.log('Offtimeselection cmp 2');
    var action2 = component.get("c.getselectOptions");
    action2.setParams({
        "field": 'Availability__c'
    });        
    action2.setCallback(this, function(response) {
        if (response.getState() == "SUCCESS") {                
            component.set("v.availableList",response.getReturnValue());
        }
    });        
    $A.enqueueAction(action2); 

    var action3 = component.get("c.getselectOptions");
    action3.setParams({
        "field": 'Start_Time__c'
    });      
    ...
    dorefresh : function(component, event, helper) {
    var checkval = component.find("firstpicklistid").get("v.value");
    console.log('checkval'+checkval);
    if(checkval != 'Partial Day'){
        component.set("v.isstartdisable",true);
        component.set("v.isenddisable",true);
    }
    else{
        component.set("v.isstartdisable",false);
        component.set("v.isenddisable",false);
    }
    ...

The issue is, how do I save the values in the child component when the save button is clicked on the parent component? I tried using events but since the parent component is iterating on the child component, the event will fire multiple times taking too much time. I need to store the data of the child component in a map or list and then push everything together to the database. Any ideas or help would be appreciated.

Best Answer

You either want to use an aura:method for this or pass an attribute.

I suggest that you read the Lightning Inter-Component Communication Patterns blog post to get an overview of the different communication means that are available to you.

Related Topic