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
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?
Best Answer
You can submit a
lightning:recordEditForm
programmatically. You can do so by retrieving the component via it'saura:id
and calling thesubmit
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 yourcomponent.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.