Lightning Web Component using lightning-record-form.

<lightning-record-form  />.

To Create, Edit and View a record “Quickly” you can use “<lightning-record-form />”  tag. Salesforce automatically Loads all fields in the object’s compact or full layout, or only the fields you specify. There is no manual custom field tag that user need to add and customize the layout. Salesforce handles everything for you including the lookup fields.

Overall if you are looking for a quick solution to create a record instantly, you can go with <lightning-record-form />.  

Every tag comes with some attributes. For this tag there are few important attributes that are usually used.

1. object-api-name
2. fields
3. record-id
4. layout-type 
5. mode
6. record-type-id

There are few more…

object-api-name

‘object-api-name’ as name suggests you needs to mention the API name of the object on which you want to perform the operation. This is a required attribute. No matter what kind of operation you are performing like create, edit or view you have to mention the API name of the object on which the operation will be performed.

fields

This attribute is used when you want to perform an operation with specific fields. All fields can be listed in a variable in js file and that variable can be binded to ‘fields’ attribute. This is not a required attribute if you are using compact or full layout in the layout-type attribute.

record-id

This attribute is required when you are performing edit or view operation. You need to mention the record id of the record on which you are performing either view or edit operation.

layout-type

When you want to perform any operation like create, edit or view, you can choose the type of layout you want to perform operation on. Salesforce had 2 layouts, one is page layout(full layout) and second is compact layout. If you want to perform task by considering whole page layout when you can specify “Full” as layout-type. If you want to perform operation on compact layout, then mention “compact” as layout-type. If you are adding layout-type attribute, then no need to mention fields attribute. This is required attribute, if you want specific layout. If you want to mention specific field, then do not add attribute to the tag.

mode

This is not a required attribute. There are 3 possible values for this attribute view, edit, readonly.

If a record ID is not provided, the default mode is edit, which displays a form to create new records.

If a record ID is provided, the default mode is view, which displays field values with edit icons on updateable fields.

If you explicitly mention readonly then pencil icon for editing the record will not be there.

record-type-id

This is a required attribute if there are multiple record types in an object. You have to mention the record type Id of the record that is in operation. If there are no record types then there is no need of this attribute.

We will see a small example on how we can create a record. We will know most of the parts in this.

html file of the lightning component bundle.

<template>
    <lightning-record-form
        object-api-name={a_SObject_Variable}
        fields={l_Fields_Variable}
        onsuccess={m_Success_Handling_JS_Method}>
    </lightning-record-form>
</template>

JavaScript file of the lightning component bundle.

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

import Contact_OBJECT from '@salesforce/schema/Contact';
import FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LAST_NAME_FIELD from '@salesforce/schema/Contact.LastName';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';
import ACCOUNT_LOOKUP_FIELD from '@salesforce/schema/Contact.AccountId';
/**
 * Creates SObject records.
 */
export default class C_File_Name extends LightningElement {
    a_SObject_Variable  = Contact_OBJECT;
    l_Fields_Variable = [FIRST_NAME_FIELD, LAST_NAME_FIELD , EMAIL_FIELD, ACCOUNT_LOOKUP_FIELD];
    m_Success_Handling_JS_Method(){
        // Run code when account is created.
    }
}

Metadata-XML file of the lightning component bundle.

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

when you create a lightning web component, it creates a folder with component name. That folder will have 3 files by default.

1. html file
2. JavaScript file
3. Configuration file

We will know about important tabs, variables, methods and class above files.

html file

All front end code will be done in this HTML file. In Lightning Aura Component, all attributes are declared in the front end component part only. However in Lightning Web Component, you will keep front end html part clean. All variables declaration will be done in Javascript part only.

LWC uses <template /> tag

JavaScript file

There are few key terminologies which we need to keep in mind when writing or updating a Javascript file.

import – To import a class, function, or variable declared in a module, you have to  use the import statement. In the above example we are importing components like, lwc and PlatformShowToastEvent. Also object and fields of objects like, contact object, and its relevant fields  etc.

import { LightningElement } from 'lwc';
import Contact_OBJECT from '@salesforce/schema/Contact’; // Import Sobject
import FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName'; // Import Fields
import Class_Name_Reference from '@salesforce/apex/Class_Name; // import apex class

export – To allow other code to use a class, function, or variable declared in a module, you have to use the export statement. In the above code we are exporting the class so that it can be used by html file and also it can be used by other components if in case used.

export default class C_File_Name extends LightningElement { 
       /* code */ 
}

You can also declare attributes as export so that, if any components is called by some other component, then it can make use of attribute to pass parameters.

class – Every JS file will have a class and name of the class will always be name of the LWC file(or folder). Class will be usually of export modifier

export default class C_File_Name extends LightningElement {}

Here C_File_Name is the name of the LWC bundle(folder) and class. Class name will be by default filename or name of lightning web componen.

JavaScript Method – You can define multiple methods as per logic and requirement. A method is where you can perform some operation before or after the record is created. You can also

m_Success_Handling_JS_Method(){
        // Run code when account is created.
}

Configuration file

Each Lightning web component folder must include a configuration file named <LWC-Component-Name>.js-meta.xml. The configuration file defines the metadata values for the component, including the design configuration for the Lightning App Builder and Experience Builder.

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

This is a default code which comes when a lightning web component is created. Apart from the above code you can configure this file to support different page types and objects.

<targets>
    <target>lightning__RecordPage</target>
    <target>lightning__AppPage</target>
    <target>lightning__HomePage</target>
</targets>

In target tags you can define all the lightning pages in which the component can be made available.

<apiVersion> – you can mention the latest salesforce api version number. This binds the component to a         Salesforce API version

<isExposed> – You can define whether the component is exposed to lightning pages or no. Indicates whether a component is usable in a managed package (true) or not (false).

There are many more tags which can be used to configure.

To execute the above code you need to deploy the code to your org. To deploy the code to the org right click on the file name in visual studio code. Then click on SFDX: Deploy Source to Org. this will run a sfdx command in backend which will deploy all files to your ORG.

One the code is deployed. You need to create a Lightning Application from developer console as shown below.

<aura:application extends="force:slds">
<! --  C_File_Name is the name of Lightning web Component 
and also Javascript file name. -->

       <c: C_File_Name />

</aura:application>

Save the file and click on Preview.

Output:

You can fill the form and click on save button.

If you observe, you will see pencil icon on each field, which indicates that you can also edit the values that you have entered.

Note:

• Quick way to Create, Edit and  View records using lightning-record-form
• All lookup related fields will be handled by Salesforce, no customization is required for the same.
• No manual layout need to be designed.
• Automatically switched between view and edit mode.
• object-api-name is the only required attribute.
• All other attribute requirement depends on the way the operation is designed.
• record-type-id is required only if you have multiple record types
• File_Name and JavaScript class name should be always same. Else you will get error on line 1 import of JavaScript file.
• All tags and tag attributes are case sensitive.
• isExposed in configuration file should be set to true.
• All tag attributes accept a variable and variable will be defined in js file of this lightning bundle.

Resources:

Salesforce : LWC – Create Record

Salesforce: LWC – Component JavaScript file