lightning-record-edit-form and lightning-record-view-form in LWC

by

In previous posts, we implemented Lightning Data Service in Lightning Web Components using lightning/uiRecordApi and Wire service to create and view records respectively. Click here to check how to create a record using Lightning Data Service. Click here to check how to view records using Lightning Data Service. In this post, we will create and view records using lightning-record-edit-form and lightning-record-view-form in LWC which are based on Lightning Data service.

lightning-record-edit-form is used to create a record. lightning-record-view-form is used to view the record. Using these base components, we need to write very minimal JavaScript code in JS Controller. Most of the functionality is taken care of by these base components only. These components also take care of Field Level Security, Object CRUD, and Sharing Settings.

Implementation

In this implementation, we will accept the Case Subject, Account, and Description from the User. After clicking Create Case button, Case will be saved in Salesforce. With the help of newly created Id of Case, we will fetch the Case details and show it on UI.

lightning-record-edit-form in LWC

Create a component ldsEditViewForm. Add lightning-record-edit-form with object-api-name as Case to create a record. We can also add onsuccess handler to get the Id of the newly created Case.

Add lightning-input-field tags inside lightning-record-edit-form with field-name. field-name should be the API name of Fields that we have to provide for the Case record. The lightning-input-field also handles the formatting of the field automatically.

Add one lightning-button with the type submit. The type of this button must be submit in order to make it work for lightning-record-edit-form. This is enough to create a Case record using lightning-record-edit-form.

lightning-record-view-form in LWC

To view a record, we have to use lightning-record-view-form. Use Case as object-api-name and pass Id of the record to record-id to fetch the record details. We will pass this Id dynamically once the Case record is created.

Add lightning-output-field inside lightning-record-view-form to fetch the specific fields to display it on UI. Use field-name to provide the API name of the field. The lightning-output-field also handles the formatting of the field automatically.

ldsEditViewForm.html

<template>
    <lightning-card title="New Case">
        <div class="slds-p-left_medium">
            <lightning-layout>
                <lightning-layout-item size="6">
                    <div class="slds-p-left_medium">

                        <!--To show record edit form-->
                        <lightning-record-edit-form object-api-name="Case" onsuccess={handleSuccess}>
                            <lightning-input-field field-name="Subject"></lightning-input-field>
                            <lightning-input-field field-name="AccountId"></lightning-input-field>
                            <lightning-input-field field-name="Description"></lightning-input-field>
                            <lightning-button type="submit" label="Create Case" variant="brand"></lightning-button>
                        </lightning-record-edit-form>
                    </div> 
                </lightning-layout-item>
                <lightning-layout-item size="6">
                    <div class="slds-p-left_large">
                        Recent Case Details:

                        <!-- To view record-->
                        <lightning-record-view-form object-api-name="Case" record-id={strCaseId}>
                            <lightning-output-field field-name="Subject"></lightning-output-field>
                            <lightning-output-field field-name="AccountId"></lightning-output-field>
                            <lightning-output-field field-name="Description"></lightning-output-field>
                        </lightning-record-view-form>
                    </div>
                </lightning-layout-item>
            </lightning-layout>
        </div>
    </lightning-card>
</template>

In JS Controller, we will only add onsuccess handler method handleSuccess() that will be called once the Case is created. We can get the Id of the created Case using event.detail.id which is assigned to strCaseId. The strCaseId is used as record-id for lightning-record-view-form.

ldsEditViewForm.js

import { LightningElement } from 'lwc';

export default class LdsEditVIewForm extends LightningElement {

    strCaseId;

    // This is called once the Case is created successfully.
    handleSuccess(event){
        this.strCaseId = event.detail.id;
    }
}

This is how our implementation look like:

lightning-record-edit-form and lightning-record-view-form in LWC

This is how we can use lightning-record-edit-form and lightning-record-view-form in LWC to create and display records respectively with minimal code.

In the next post, we will implement the lightning-record-form which is used to create, view, and edit the record, all-in-one. If you don’t want to miss new posts, please Subscribe here.

If you want to know more about this, you can check the official Salesforce documentation here.

Thanks!

Leave a Comment