[SalesForce] Updating parent component record name from child sub-component edit via event

onites. I have encountered an issue with updating a record from a child sub-component. The parent component passes the attribute when it instantiates the child component but whenever there is an edit in a child's lightning:input, the change does not reflect in the parent after the COMPONENT event has fired. Any help would be greatly appreciated!

Event

<aura:event type="COMPONENT">
        <aura:attribute name="updateField" type="String" />
</aura:event>

Parentcmp.cmp

<force:recordData aura:id="recordLoader"
                  recordId="{!v.recordId}"
                  layoutType="FULL"
                  targetRecord="{!v.record}"
                  targetFields="{!v.simpleRecord}"
                  targetError="{!v.recordError}"
                  mode="EDIT"/>

<aura:handler name="componentEventFired"
              event="c:ContentEditorEvent"
              action="{!c.handleComponentEventFired}" />

<c:childcmp docName = "{!v.simpleRecord.Name}"

ParentController.js

handleComponentEventFired : function(cmp, event) {
    var updateField = event.getParam("updateField");
    cmp.set("v.simpleRecord.Name", updateField);
    },

Childcmp.cmp

<aura:attribute name="docName" type="String" />
<aura:registerEvent name="componentEventFired" type="c:ContentEditorEvent" />

<lightning:button label="Save" variant="brand" onclick="{!c.fireComponentEvent}" />

ChildController.js

fireComponentEvent : function(cmp, event) {
    var docName = cmp.get("v.docName");
    var cmpEvent = cmp.getEvent("componentEventFired");

    cmpEvent.setParams({"updateField" : docName});
    cmpEvent.fire();
    },

I just don't get why this doesn't update the record.

Best Answer

You didn't actually save the record. As an aside, all this work you've done is basically pointless, because two-way binding works automatically; when docName is updated in the child, the simpleRecord.Name value in the parent is automatically updated. If you want to update the record, all you need to do is call saveRecord:

handleComponentEventFired : function(cmp, event) {
  cmp.find("recordLoader").saveRecord();
},

I've written a minimal reproduction for you to take a look at:

App

<aura:application extends="force:slds">
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="simpleRecord" type="Map" default="{}" />
    <aura:attribute name="recordError" type="String" />

    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <force:recordData aura:id="recordLoader"
                      recordId="{!v.recordId}"
                      layoutType="FULL"
                      targetError="{!v.recordError}"
                      targetFields="{!v.simpleRecord}"
                      mode="EDIT"/>
    <c:q214934c docName="{!v.simpleRecord.Name}" onsave="{!c.save}" />
    <hr />
    {!v.simpleRecord.Name}
    <hr />
    {!v.recordError}
</aura:application>

App Controller

({
    init: function(component, event, helper) {
        if(!component.get("v.recordId")) {
            component.find("recordLoader").getNewRecord("Account");
        }
    },
    save: function(component, event, helper) {
        component.find("recordLoader").saveRecord();
    }
})

Component

<aura:component >
    <aura:registerEvent name="onsave" type="c:saveEvent" />
    <aura:attribute name="docName" type="String" />
    <lightning:input label="Input" value="{!v.docName}" />
    <lightning:button label="Save" variant="brand" onclick="{!c.notifyParent}" /> 
</aura:component>

Component Controller

({
    notifyParent: function(component, event, helper) {
        component.getEvent("onsave").fire();
    }
})

Event

<aura:event type="COMPONENT" description="Event template" />

Related Solutions

[SalesForce] Find Parent Event of Child Event

Event Relation records to be inserted always with status as "New" but, later it can be updated to "Accepted" or "Declined" .

Insert :

EventRelation er = new EventRelation( RelationId = UserInfo.getUserId() ,
EventId = '00U2000000VcrubEAB', Status = 'New' );

insert er;

Update :

Get event id from event object. Then query to Event Relation and get the id(event relation record id) ;

EventRelation er = new EventRelation( Id = "EventRelation rec id",
Status = 'Declined' );

update er;

[SalesForce] Getting data from Parent Component to child Component

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:

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" />

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" />
On the child helper you need to triger it whenever you want: var event = component.getEvent('callParentEvent').fire();
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}"/>
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
}