Getting Started with Lightning-Record-Edit-Form

• Let us first create a new LWC component.

• We will configure the meta xml file to make our component visible in Salesforce and make in available to the app page.

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

• In the above code we have set <isExposed>true</isExposed> tag to True so that the component is visible and we have added App Page as a target so that the component can be added to any app page.

    <targets>
        <target>lightning__AppPage</target>
    </targets>

• Our Meta is ready to be deployed now let us create a Markup for the same.

• HTML Markup

<template>
    <lightning-card title="Create a Contact">
        <lightning-layout>
            <lightning-layout-item>
                <lightning-record-edit-form object-api-name="Contact" onsuccess={successHandler} onerror={errorHandler}>
                    <p><lightning-input-field field-name="Name"></lightning-input-field></p>
                    <p><lightning-input-field field-name="Phone"></lightning-input-field></p>

                    <p><lightning-button type="submit" variant="brand" name="Save" label="Create a Contact"></lightning-button></p>
                </lightning-record-edit-form>
            </lightning-layout-item>

        </lightning-layout>
    </lightning-card>
</template>

• The lightning-edit-record-form takes two parameter object-api-name="S-Object" and an onsucces client side handler whose functionality we will further write using javascript file.

• The <lightning-input-field field-name="field-api-name"></lightning-input-field> takes the field-api-name of the Object , In the above example we have taken Name and Phone as two inputs to be taken from the User.

• For saving the Contact Record we will create a lightning button <lightning-button type="submit" variant="brand" name="Save" label="Create an Contact"> the type of the button must be Submit.

-Now let us write some javascript.

    import { LightningElement,track } from 'lwc'; import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ContactCreator extends LightningElement {
    @track contactId;

    successHandler(event)
    {
        this.contactId = event.detail.id;
        if(this.contactId!=undefined)
        {
            const ev = new ShowToastEvent(
                {
                    title:'Contact Created',
                    message : 'Conat Id'+this.contactId,
                    variant:'success',
                }
            );
            this.dispatchEvent(ev);
        }
    }
    errorHandler(event)
    {
        const ev = new ShowToastEvent(
            {
                title:'Unable to create a Contact',
                message : 'Please contact your System Administrator',
                variant:'error',
            }
        );
        this.dispatchEvent(ev);
    }
}

-The onsuccess handler captures the contactId of the Contact which was created from the UI.

• We will display the same contactId via ToastNotification.

• In order to display a ToastNotification we need to import then same

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

• Inside the onsuccess handler we will create a new ToastEvent object and will dispatch the same using this.dispatchEvent(ev)