Create a recording using "lightning-record-form" in Lightning Web Component

Hi ,

Here we are going to learn how we can create a record without using apex controller:
By using "lightning-record-form" we can  do the following:

Load a Record

Create a Record

Update a Record


In our example we are going to see how can we create a recording using "lightning-record-form"

As usual let's  create lightning web component bundle with "HTML,JS,Meta" files.

accountCreateSampleComp.Html:

<template>
    <lightning-card  title="Account Creation">
        <p class="slds-p-horizontal_small">
                    <lightning-record-form object-api-name={objectApiName} fields={fieldList} onsuccess={handleAccountCreate}></lightning-record-form>
            </p>
    </lightning-card>
</template>

Here "object-api-name" - place your object name
"Fields" specify the field what you want to make available for record creation
"onsuccess" specify the method what has to be done when record is saved successfully

accountCreateSampleComp.js:
/* Import each field to use on your form. It recognize the whether the field is invalid or not at compile time itself .
Import platformShowToastEvent for showing toast Message
Import navigation for navigating to record page
*/

import { LightningElement } from 'lwc';
import Account_Name from '@salesforce/schema/Account.Name';
import Account_Type from '@salesforce/schema/Account.Type';
import Account_Industry from '@salesforce/schema/Account.Industry';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';

export default class AccountCreateSampleComp extends NavigationMixin(LightningElement) {
    objectApiName = 'Account';
    fieldList = [Account_Name,Account_Type,Account_Industry];   
    handleAccountCreate(event){
        const evt = new ShowToastEvent({
            title: "Account Create",
            message: "Record ID: " + event.detail.id,
            variant: "success",
        });
        this.dispatchEvent(evt);
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: event.detail.id,
                objectApiName: 'Account',
                actionName: 'view'
            },
        });
    }

}

accountCreateSampleComp.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__Tab</target>

    </targets>

</LightningComponentBundle>

Here in meta file we are making our component available for Tab creation.

Ouput:

References:

https://www.youtube.com/watch?v=WaBeHrK3-CQ

https://developer.salesforce.com/docs/component-library/documentation/en/48.0/lwc/lwc.data_get_user_input_intro