[SalesForce] Submit Record Edit Form for every object in Aura iteration

I have a Contact object form with a child form component for Buying Center objects.
When I upsert the Contact, I need to submit a list of Buying Centers for this Contact.

Parent Contact component has a child component with ID attribute:

<c:buyingCenter masterRecordId="{!v.contact}" aura:id="buyingCentersComponent"/>

Parent controller calls aura:methods from child component upon onclick on a Save button:

 upsertContact: function (component, event, helper) {
        try {
            component.find("buyingCentersComponent").initialSaveBuyingCentersAndCheckRequiredFields();
            component.find("buyingCentersComponent").saveBuyingCentersFromParent();
            helper.upsertContact(component, contact);
        } catch (e) {
            console.log('There was an error: ' + e);
        }
    }

In child Buying Center component I have recordEditForm inside an aura:iteration:

<aura:attribute name="buyingCenters" type="Buying_Center_Assignment__c[]" default="[]"/>

<aura:method name="initialSaveBuyingCentersAndCheckRequiredFields" action="{!c.initialSaveBuyingCentersAndCheckRequiredFields}" access="PUBLIC">
    <aura:attribute name="foundError" default="false" type="Boolean"/>
</aura:method>

<aura:method name="saveBuyingCentersFromParent" action="{!c.saveBuyingCentersFromParent}" access="PUBLIC"/>

<aura:iteration items="{!v.buyingCenters}" var="buyingCenter">
        <lightning:layout>
            <lightning:layoutItem size="12">
              <lightning:recordEditForm
                      aura:id="buyingCenterEditForm"
                      recordId="{!buyingCenter.Id}"
                      objectApiName="Buying_Center_Assignment__c">

                  <lightning:layout>
                      <lightning:layoutItem size="5">
                                  <lightning:inputField fieldName="Purchase_Unit__c"/>
                      </lightning:layoutItem>
                      <lightning:layoutItem size="5">
                                  <lightning:inputField fieldName="Role__c"/>
                      </lightning:layoutItem>
                  </lightning:layout>

              </lightning:recordEditForm>
            </lightning:layoutItem>
        </lightning:layout>
</aura:iteration>

Now this child component has a method to add Buying Center objects to view. After adding the object the user can select values using recordEditForm:

addBuyingCenter: function (component, event, helper) {
       var buyingCenters = component.get("v.buyingCenters");
       if (buyingCenters == null) {
           buyingCenters = [];
       }
       var buyingCenter = {};
       buyingCenters.push(buyingCenter);
       component.set("v.buyingCenters", buyingCenters);
   }

When user finally clicks Save the list of Buying Centers is supposed to submit before the whole Contact form is also submitted:

initialSaveBuyingCentersAndCheckRequiredFields: function (component, event, helper) {
        var foundCmp = component.find('buyingCenterEditForm');
        console.log('Component to submit: ' + foundCmp);
        for (var i = 0; i < foundCmp.length; i++) {
            foundCmp[i].submit(); 
        }

        //After submitting I try to get the records again to check if submit was successful
       var masterRecordId = component.get("v.masterRecordId");
       helper.loadBuyingCenters(component, event, helper, masterRecordId);

       //This should be assigned by the helper but it's empty
       var buyingCenters = component.get("v.buyingCenters");
       console.log('Buying centers after submit: ' + JSON.stringify(buyingCenters));

        //additional logic to validate required fields      
}

The problem is that the Buying Centers are not submitting. The logs currently show:

Component to submit: SecureComponentRef: markup://lightning:recordEditForm {427:0} {buyingCenterEditForm}{ key: {"namespace":"c"} } buyingCenter.js:100:17
Buying centers after submit: [{}]

The object is correctly added to the view, I can select fields in the Record Edit Form but they are not saving. Is there anything wrong with my logic?

Best Answer

After adding onError handler to the lightning:recordeditform it turned out I was missing a field when submitting the records - I needed to add Id of parent that the child relates to and I achieved it with a hidden field:

<lightning:layoutItem class="slds-hide">
    <!-- Hidden Contact ID field needed for submit -->
    <lightning:inputField fieldName="Contact__c" value="{!v.masterRecord.Id}"/>
</lightning:layoutItem>

Lesson learned - use onError, onSubmit and onSuccess handlers to check your recordEditForm

Related Solutions

[SalesForce] How to programmatically submit a lightning-record-edit-form

I have run into this often since moving from Aura to lightning web components (LWC) and have found that the only solution is to hide a submit button on the form, and then call click on it from your JS method when desired.

A very basic example of this would look like this:

HTML

<template>
   <lightning-spinner if:false={rendered} 
                      alternative-text="loading..." 
                      variant="brand" 
                     size="small" >
   </lightning-spinner>
   <template if:true={rendered}>
       <lightning-record-edit-form onsubmit={handleSubmit}
                                   object-api-name="Account" >
            <lightning-messages></lightning-messages>
            <lightning-input-field field-name="Name" ></lightning-input-field>
            <input type="submit" class="hidden" />
        </lightning-record-edit-form>
        <lightning-button onclick={submitMyformProgramatically} 
                          variant="brand" 
                          label="Click me" >
         </lightning-button>
    </template>
</template>

import { LightningElement, track} from 'lwc';

export default class App extends LightningElement {

  @track 
  rendered = false;

  connectedCallback(){
     this.rendered = true;
  }

  submitMyformProgramatically(){
     const btn = this.template.querySelector( ".hidden" );

     if( btn ){ 
        btn.click();
     }
  }

  handleFormSubmit( event ){
     const fields = event.detail.fields;
     console.log( "Fields: ", fields );
  }

}

CSS

.hidden {
    display: none;
}

in this example, a simple click of the external button will submit this form programatically by locating the button on the form and clicking it.

In Aura lightning:recordEditform, you used to be able to set an aura:id on the form and simply call submit from your JS, but that doesn't work in the new LWC lightning-record-edit-form

Error handling using aura record edit form

You need to remove the <lightning:messages /> from the lightning:recordEditForm to remove the standard lightning message. Use the onerror attribute to handle the error.

Example

Markup

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <lightning:recordEditForm recordId="0035j00000MpvTxAAJ" objectApiName="Contact" onerror="{!c.handleError}">
        <lightning:messages />
        <lightning:outputField fieldName="AccountId" />
        <lightning:inputField fieldName="FirstName" />
        <lightning:inputField fieldName="LastName" />
        <lightning:inputField fieldName="Email" />
        <lightning:button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Update" />
    </lightning:recordEditForm>
</aura:component>

Controller

({
    handleError: function (component, event, helper) {
        //Get the error
        var error = event.getParams();
        console.log("Error : " + JSON.stringify(error));
        //Get the error message
        var errorMessage = event.getParam("message");
        console.log("Error Message : " + errorMessage);
    }   
})

Best Answer

Related Solutions

[SalesForce] How to programmatically submit a lightning-record-edit-form

Error handling using aura record edit form

Related Topic