7

Im implementing an line item editor for the "Order" SObject and want give lightning:recordEditForm with lightning:inputField a try for this.

What I have so far is an edit for the order combined with an iteration over the line-items which works as expected:

<aura:attribute name="Order"        type="SObject"          default="{}" />
<aura:attribute name="OrderId"      type="String"    />
<aura:attribute name="Items"        type="SObject[]"        default="[]" />
<aura:if isTrue="{! !empty(v.ParentType) }">
    <lightning:recordEditForm recordId="{!v.OrderId}" objectApiName="Order">
        <lightning:messages />
        <lightning:inputField fieldName="Name" />
        <lightning:button class="elfOrderSaveButton slds-m-top_small" variant="brand" type="submit" name="update" label="Update" />
    </lightning:recordEditForm>
    <aura:iteration items="{!v.Items}" var="item">
        <div>{!item.PricebookEntry.Name}({!item.Id})</div>
        <lightning:recordEditForm recordId="{!item.Id}" objectApiName="OrderItem">
            <lightning:messages />
            <lightning:inputField fieldName="Quantity" />
            <lightning:inputField fieldName="UnitPrice" />
            <lightning:inputField fieldName="TotalPrice" />
            <lightning:inputField fieldName="Description" />
            <div class="elfItemSaveButtonWrapper">
                <lightning:button class="elfItemSaveButton slds-m-top_small" variant="brand" type="submit" name="update" label="Update" />
            </div>
        </lightning:recordEditForm>
    </aura:iteration>   
</aura:if>

This looks like

enter image description here

Now I don't want each line item to have it's own save-button but instead only ONE master-button which saves all the items at once.

I've tried

<lightning:button class="slds-m-top_small" label="SAVE"     onclick="{! c.saveAll }"/>  

and in the controller

saveAll         : function(cmp, evt, hlp) { 
    $('.elfItemSaveButton').click();        
},

Excuse my jquery - without the outcome would be the same: thanks to LockerService, I can't trigger the click-event on the buttons remotely (the are not available in the secure DOM).

Is there a way to submit the lightning:recordEditForm without using the button on the form itself but form the "outside"?

One approach would be to implement the jquery click in a child-compo with api < 39 to bypass LockerService but I'm wondering if this could be done in a less dramatic way?

Any ideas?

  • 1
    Note that submitting multiple lightning:recordEditForms will likely have severe performance implications. You might want to consider submitting the data to an ordinary AuraEnabled method instead. – sfdcfox May 9 '18 at 14:53
8

You can submit a lightning:recordEditForm programmatically. You can do so by retrieving the component via it's aura:id and calling the submit method.

e.g.

component.find('editForm').submit()

Here are the supporting docs

Since you are using the forms in an iteration, you can give them all the same aura:id and your component.find call will return an array as opposed to an individual component.

Beware, in my experience, submitting the form this way does NOT fire an onsubmit handler if you have one defined.

  • this sounds very good and I will give it a try. thanks a lot! – Uwe Heim May 9 '18 at 14:21
  • Glad I could help! – Antonio Manente May 9 '18 at 14:23
  • tested: works perfectly - and it's very FAST!! btw: do you have any idea on how to turn off the step-size for lightning:inputField? this is causing me a lot of trouble... if not, I will just ask a new question. – Uwe Heim May 11 '18 at 16:46
  • @Anotonio and @Uwe Heim, by reading this thread I can understand multi insert/update is possible with recordEditForm. Could you please see this question which is very similar to this thread?. I have tried with programmatic way of submitting in the controller but got error saying $controller$handleSubmit [component.find(...).submit is not a function]. – mohammed azarudeen Jul 25 '18 at 18:20

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.