0

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.

3

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.

|improve this answer|||||
0

Typically when you are talking about Top down approach you don't need events. Like @POZ suggested use an aura:method or pass either a Sobject attribute or if you have values from multiple objects prepare a JSON string and pass down a String attribute.

In your child component use a handler to detect data changes on the passed down attribute and fire a call to the server side on handlers action like in the below link.

Detecting Data Changes with Change Handlers

|improve this answer|||||
  • 1
    No need for JSON in a situation like this, the Object attribute is very multipurpose and it's simple to pass a JS object if needed. – tsalb Jun 9 '18 at 6:54
  • @tsalb The reason I mentioned JSON was it would be easy to manipulate in backend apex when you have a mix of attributes. – codeyinthecloud Jun 9 '18 at 14:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.