Step by Step walkthrough of lightning-record-form and other base components | LWC

In this guide, we are going to walk you through the steps and try to explain the use of lightning-record-edit-form, lightning-record-form and lightning-record-view-form in very simple terms.

These are three standard base Lightning Components built on Lightning Data Services which can be used to communicate with Salesforce Data.

Steps to use lightning-record-form in LWC

You can use lightning-record-form to quickly build a form and perform create, read or update operations on the Salesforce record. Creating a form using this component is the easiest way to do it as no customization is required to build the form manually.

The framework provides all the UI elements(fields, buttons, alignment of fields), all you need to do is provide the object-API-name (API Name of the Object), record-id(Id of the record for that Object), fields to show or the layout-type attribute. Use the layout-type attribute to specify a Full or Compact layout.

Read the complete Salesforce documentation HERE

<template>
    <lightning-record-form
    object-api-name={objectApiName}
    record-id={recordId}
    fields={fields}
    >

    </lightning-record-form>
</template>

Explanation

In the HTML file we define the lightning-record-form and populate the object-API-name, record-id, and fields attribute of this component.

object-api-name : Reference to the API Name of the Object.

record-id : Salesforce Id of the record that your want to render. Usually this is dynamically rendered by using this LWC Component in the Lightning Record Page.

fields : Array of fields(API Names) that you want to display as part of this component.

JS Code

import { LightningElement,api } from 'lwc';

import Acccount_Phone from '@salesforce/schema/Account.Phone';
import Acccount_Website from '@salesforce/schema/Account.Website';
import Acccount_Shipping_Address from '@salesforce/schema/Account.ShippingAddress';
import Acccount_Type from '@salesforce/schema/Account.Type';


export default class LightningRecordFormDemo extends LightningElement {
    fields = [Acccount_Phone,Acccount_Website,Acccount_Shipping_Address,Acccount_Type];

    @api recordId;
    @api objectApiName;

}

Explanation

In the JS file, we first make reference to the fields that need to be displayed in the UI using ‘@salesforce/schema/<ObjectAPIName>.<FieldAPIName>’.

We then construct an array of all the fields in a variable, which will be used in the HTML Page.

@api decorator is used to populate values of recordId and objectApiName from an external source. For example, when using an LWC inside the Lightning Record Page of an Object, these values are populated with the Salesforce record ID and Object’s API Name.

Meta.xml

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

Explanation

We want to show the LWC component created in an Account record. To be able to drag and drop this component in the Lightning Page, we should expose the LWC component and specify the target. Update the value inside <isExposed> tag to true and insert an targets to make this LWC component available in the Lightning Page. Without this configuration your LWC component won’t be available in the Lightning App Builder

DEMO

Steps to use lightning-record-view-form in LWC

The lightning-record-view-form base component is used to show record data, with field values and labels, in view-only mode. The data is rendered based on the field type defined on Salesforce Object. You can customize the layout alignment and conditional visibility of the fields as per your choice.

To use lightning-record-view-form you need to pass the recordId, object api name and the fields’ referenced to the lightning output field.

Read the complete Salesforce documentation HERE

HTML Code

<template>
    <lightning-record-view-form  object-api-name={objectApiName} record-id={recordId}>
        <lightning-output-field field-name={accountPhone}> </lightning-output-field>
        <lightning-output-field field-name={accountWebsite}> </lightning-output-field>
        <lightning-output-field field-name={accountShippingAddress}> </lightning-output-field>
        <lightning-output-field field-name={accountType}> </lightning-output-field>
    </lightning-record-view-form>
</template>

Explanation

In the HTML file, we use the lightning-record-view-form component, give reference to the object API name using object-api-name and reference to the recordId using the record-id attributes.

We also need to mention the fields that we want to show in the lightning-record-view-form by using the lightning-output-field. Lightning-output-field is used to display the value of a field in the UI, all you need to do is pass the field API name to the field-name attribute.

JS Code

import { LightningElement,api } from 'lwc';

import Acccount_Phone from '@salesforce/schema/Account.Phone';
import Acccount_Website from '@salesforce/schema/Account.Website';
import Acccount_Shipping_Address from '@salesforce/schema/Account.ShippingAddress';
import Acccount_Type from '@salesforce/schema/Account.Type';

export default class LightningRecordViewFormDemo extends LightningElement {
    accountPhone            = Acccount_Phone
    accountWebsite          = Acccount_Website
    accountShippingAddress  = Acccount_Shipping_Address
    accountType             = Acccount_Type

    @api recordId;
    @api objectApiName;
}

Explanation

In the JS file, we get references of the field API names, using ‘@salesforce/schema/<ObjectAPIName>.<FieldAPIName>’. These references are then used in the HTML file to display the field values of the record (record-id passes in lightning-record-view-form).

Meta.xml

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

Demo

Steps to use lightning-record-edit-form in LWC

The lightning-record-edit-form is used to build a form for creating new records or updating fields of an existing record. You have the flexibility to customize the form as per your choice, build js validations and a host of other things.

lightning-record-edit-form comes with the following features.

1. Create new records or Edit fields of an existing record.

2. Dynamic rendering of field based on certain actions for example, if the account type is “prospect” hide revenue field in the UI.

3. You can implement client-side JS Validations for specific use cases.

4. Create Salesforce Validations to prevent records from getting saved

Read the complete Salesforce documentation HERE

HTML Code

<template>
    <lightning-record-edit-form
    onsubmit={handleSave}
    onsuccess={handleSuccess}
    record-id={recordId}
    object-api-name={objectApiName}
    >
        <lightning-input-field field-name={accountPhone}> </lightning-input-field>
        <lightning-input-field field-name={accountWebsite}> </lightning-input-field>
        <lightning-input-field field-name={accountShippingAddress}> </lightning-input-field>
        <lightning-input-field field-name={accountType}> </lightning-input-field>

        <lightning-button variant="brand" type="submit" label="Save">

        </lightning-button>

    </lightning-record-edit-form>
</template>

Explanation

In the HTML file define the lightning-record-edit-form and populate the object-api-name and record-id similar to the previous components discussed above.

We can also create custom handler for each save event fired. In our code we created a handleSubmit (to intercept the form submission event and over-ride with custom logic) and handleSuccess (to handle the logic after form is submitted successfully).

JS Code

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

import Acccount_Phone from '@salesforce/schema/Account.Phone';
import Acccount_Website from '@salesforce/schema/Account.Website';
import Acccount_Shipping_Address from '@salesforce/schema/Account.ShippingAddress';
import Acccount_Type from '@salesforce/schema/Account.Type';

export default class LightningRecordEditFormDemo extends LightningElement {
    accountPhone            = Acccount_Phone
    accountWebsite          = Acccount_Website
    accountShippingAddress  = Acccount_Shipping_Address
    accountType             = Acccount_Type

    @api recordId;
    @api objectApiName;

    handleSuccess(event){
       this.dispatchEvent(
            new ShowToastEvent({
                title:'Success',
                message:'Record updated successfully',
                variant:'success'
            })
       )
    }

    handleSave(event){
        event.preventDefault();
        const fields = event.detail.fields;
        this.template.querySelector('lightning-record-edit-form').submit(fields);
    }
}

Explanation

In the JS file, we make reference to the fields that we want to display in the HTML file (similar to the above components discussed). We will focus our attention on the handler methods. To create a custom handler all you need to do is create a js function, in our example, we created handleSubmit and handleSuccess methods (you can name it anything) and mention them in the onsuccess and onsubmit attributes of the lightning-record-edit-form.

handleSubmit: Here we intercept the form getting saved and prevent its default behaviour using event.preventDefault(). We then take references of all the fields getting submitted and save field values using : this.template.querySelector(‘lightning-record-edit-form’).submit(fields);

In handleSubmit we can override any field values, and put in a js validation in place before manually saving the fields (..form’).submit(fields);)

handleSuccess: Here we can do post save functionalities, like let’s say we want to show a toast message after the form is saved successfully or we want to do another DML operation after the previous data is saved.

onerror: You can also create a handler when an error occurs while saving the data using lightning-record-edit-form. You can take this as homework and try it out in your local org. Do let me know in the comments below if you are stuck somewhere.

Demo

Conclusion

As you can see from the examples above, you can easily leverage base component to implement most of the requirements where you need to do CRUD operations on your Salesforce Data. Do try out these examples in your developer, feel free to copy these codes, make changes and experiment.

For requirements which need more customization you can take the below two approaches:

Using wire adapter & JS APIs in LWC.

Working with Apex and Lightning Web Component

If you find this article useful, do share it within your circle. If you have any feedbacks and suggestions, do let me know by comment box below.