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...

Want to know more about Salesforce Devlopments?

We keep your data private and share your data only with third parties that make this service possible. Read our Privacy Policy.

Holler Box