Skip to content

Submit more than one Record Edit Forms in a single click

Hello trailblazers,

Everyone finds a way to create/update records without writing our own controller code. And we have LDS form-based components to do so but they only works with the single record, what about when we need to work with more than one record in one go then we are required to go for the controller code . But by analysing the situation, we can decide if we can still go with LDS by doing some tricks.

Here’s in this example, I am submitting two record edit forms from a single button click thus creating two account records in one go.

<template>
    <!--Headings-->
    <lightning-layout horizontal-align="center">
        <lightning-layout-item padding="around-small" size="6">
            Account Name
        </lightning-layout-item>
        <lightning-layout-item padding="around-small" size="6">
            Industry
        </lightning-layout-item>
    </lightning-layout>

    <!--First record edit form-->
    <lightning-record-edit-form object-api-name="Account" onerror={handleError}>
        <lightning-layout horizontal-align="spread">
            <lightning-layout-item padding="around-small" size="6">
                <lightning-input-field field-name='Name' variant="label-hidden"></lightning-input-field>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small" size="6">
                <lightning-input-field field-name='Industry' variant="label-hidden"></lightning-input-field>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-record-edit-form>

    <!--Second record edit form-->
    <lightning-record-edit-form object-api-name="Account" onerror={handleError}>
        <lightning-layout horizontal-align="spread">
            <lightning-layout-item padding="around-small" size="6">
                <lightning-input-field field-name='Name' variant="label-hidden"></lightning-input-field>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small" size="6">
                <lightning-input-field field-name='Industry' variant="label-hidden"></lightning-input-field>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-record-edit-form>

    <!--Save Button-->
    <lightning-button variant="brand" name="save" label="Create Accounts" onclick={handleSave}
        class="slds-m-left_medium">
    </lightning-button>
</template>
import { LightningElement, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class SubmitMultipleForms extends LightningElement {
    @track error = false;

    handleSave() {
        // Submit the forms
        this.template
        .querySelectorAll("lightning-record-edit-form")
        .forEach(form => form.submit());

        // Show success/error message
        if(this.error) {
            const event = new ShowToastEvent({
                title: 'Error!',
                message: 'Some error occured. Please try again.',
                variant: 'error'
            });
            this.dispatchEvent(event);
        } else {
            const event = new ShowToastEvent({
                title: 'Success',
                message: 'Accounts saved successfully.',
                variant : 'success'
            });
            this.dispatchEvent(event);
        }
        //Reset the fields
        this.template.querySelectorAll("lightning-input-field")
        .forEach(input => input.reset());
    }

    handleError(event) {
        this.error = true;
    }
}

Hope, you liked it!
Please help us to improve.

Published inCoding Mania

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *