Usage of Lightning Record Edit Form in Lightning Web Components

Usage of Lightning Record Edit Form in Lightning Web Components

In my previous post, I have told you about how to navigate in the Lightning Web Components, now I’m going to tell you how to use lightning-record-edit-form in Lightning Web Component.

Lightning Record Forms uses LDS or Lightning Data Service, please have a look at the snippet.

lightningRecordEditForm.html

<template>
    <lightning-card title="Lightning Record Edit Form"  icon-name="custom:custom14">
        <div class="slds-m-around_medium">
                Select Account 
            <select id='myselect' class="slds-select" onchange={handleAccountSelect} >
                <option value='null' >--Select Account--</option>
                <template for:each={accountData} for:item="acc"> 
                    <option key={acc.Id} value={acc.Id} >{acc.Name}</option>
                </template>
            </select> 
        </div>
        <lightning-record-edit-form title='Record Edit'
                                record-id={recordId} object-api-name={accountObject} 
                                onsuccess={handleAccountCreated}
                                onsubmit = {handleSubmit} >
            <lightning-messages></lightning-messages>
            <div class="slds-grid slds-wrap slds-m-around_medium">
                <template if:false={reloadForm}>
                    <div class="slds-col slds-size_2-of-2">
                        <lightning-input-field field-name={nameField}></lightning-input-field>
                    </div>
                    <div class="slds-col slds-size_2-of-2">
                        <lightning-input-field field-name={phoneField}></lightning-input-field>
                    </div>
                </template>
                <template if:true={reloadForm}>
                    Please Wait!
                </template>
            </div>
            <lightning-button class="slds-m-around_medium" type="submit" variant="brand" label={btnLabel}></lightning-button>
        </lightning-record-edit-form>
    </lightning-card>
</template>

lightningRecordEditForm.js

import { LightningElement, track, wire } from 'lwc';
import { refreshApex } from '@salesforce/apex';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
import ACCOUNT_PHONE_FIELD from '@salesforce/schema/Account.Phone';

import getAllAccounts from '@salesforce/apex/helloWorldClass.getAllAccounts';


import { ShowToastEvent } from 'lightning/platformShowToastEvent';


export default class LightningRecordEditForm extends LightningElement {
    wiredAllAccountResult; // a new variable was introduced 
    @track accountData;
    @track error ;
    @track recordId;
    @track reloadForm;

    accountObject = ACCOUNT_OBJECT;
    nameField = ACCOUNT_NAME_FIELD;
    phoneField = ACCOUNT_PHONE_FIELD;
    
    @wire(getAllAccounts) 
    imperativeWiring(result) {
        this.wiredAllAccountResult = result;
        if(result.data) {
            this.accountData = result.data;
        }else if (result.error) {
            this.error = result.error ; 
        }
    }
    
     
    handleAccountCreated(event){
        this.reloadForm=true;
        // Run code when account is created.
        let message = 'Account has been created successfully with the name \''+event.detail.fields.Name.value+'\'';
        if(this.recordId!==undefined && this.recordId!==null){
            message = 'Account has been updated successfully'
        }
        const evt = new ShowToastEvent({
            title: 'Successfull',
            message: message,
            variant: 'success',
        });
        this.dispatchEvent(evt);
        refreshApex(this.wiredAllAccountResult);
        this.recordId=null;
        this.reloadForm=false;
    }
   handleSubmit(event){
        event.preventDefault();       // stop the form from submitting
        this.reloadForm=true;
        const fields = event.detail.fields;
        this.template.querySelector('lightning-record-edit-form').submit(fields);

    }
    handleAccountSelect(event) {
        if(event.target.value!=='null'){
            this.recordId =event.target.value;
        }else{
            this.recordId = null;
        }
    }
    
    get btnLabel(){
        if(this.recordId!==undefined && this.recordId!=null){
            return 'Update Account';
        } 
        return 'Create Account';
    }
}

lightningRecordEditForm.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="LightningRecordEditForm">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

https://developer.salesforce.com/docs/component-library/bundle/lightning:recordEditForm

MoreoverIf you have any suggestions or issue with the post, you can reply in the comment box.

Support: For any further Salesforce support/ customisations, Chat with us

Parul Singh

I’m a Salesforce Certified Service Cloud Consultant, Certified Administrator & Certified Platform Developer. I have 2 years of experience, currently working on Field Service Lightning, Lightning Flows and Learning Lightning Web Component. I was featured in the top Salesforce Bloggers of 2018 by www.forcetalks.com

You may also like...