LDS Base Component (lightning-record-form)

The easiest way to work with a single record in Lightning web components is to use the lightning-record-*-form components. Below are 3 base Lightning components built on Lightning Data Service (LDS):

1. Lightning-record-form

2. Lightning-record-view-form

3. lightning-record-edit-form

The below table is useful to identify features of each form.

Note

It is always suggested to use the above 3 components and if the above 3 components don't give enough flexibility, then use a wire adapter like getRecord and getFieldValue(record, field).

In this article, I am going to explain about Lightning-record-form.

lightning-record-form

• Using <lightning-record-form> we can create a quick form to create, modify, and view a record. Like Standard Controllers in Visualforce, Salesforce has provided one of the exciting features in Summer 17 is Lightning Data Service.

• We can retrieve record data without writing a single piece of Apex Server-side code. We need to use the new force:recordData component to achieve this.

Pros

• Switches between view and edit modes automatically when the user begins editing a field in a view form

• Provides default Cancel and Save buttons in edit forms

• Uses the object's default record layout with support for multiple columns

• Loads all fields in the object's compact or full layout, or only the fields you specify

Cons

• Does not support client-side validation.

• All standard objects are not supported like task, events.

• lightning-record-form does not support prepopulating of field values when the form loads. To create a form that displays custom field values, use the lightning-record-edit-form component.

Syntax

<lightning-record-form

  record-id="Id of the record which you want to use"

  object-api-name="API name of the object which you want to use"

  layout-type="Full / Compact"

  fields="Fields you want to display."

  columns="Number of column you want to display"

  mode="view / edit / readonly">

</lightning-record-form>

What can be done with record-form?

• View record with options to Edit fields

• View record with options to Record-only fields

• Editing a record

• Creating a record

• Get layout based on record-type (If your org uses record types, picklist fields display values according to your record types. You must provide a record type ID using the record-type-id attribute if you have multiple record types on an object and you don't have a default record type. Otherwise, the default record type ID is used. To retrieve a list of record type IDs in your org, use the getObjectInfo wire adapter)

Overriding Default Behaviors

• To customize the behavior of your form when it loads or when data is submitted, specify your own event handlers using the onload and onsubmit attributes.

• Errors are automatically handled. If a single field has multiple validation errors, the form shows only the first error on the field. Similarly, if a submitted form has multiple errors, the form displays only the first error encountered. When you correct the displayed error, the next error is displayed.

• To customize the behavior of the form when it encounters an error on submission or when data is submitted successfully, use the onerror and onsuccess attributes to specify event handlers.

• To customize the behavior when the Cancel button is clicked, use the oncancel attribute.

Example

Create blog_record_form.html

<template>

       <lightning-card>

           <lightning-record-form

               object-api-name={objectApiName}

               fields={fields}

               onsuccess={handleSuccess}>

           </lightning-record-form>

       </lightning-card>

</template>

Update blog_record_form.js

import { LightningElement } from 'lwc';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import Lead_Object from '@salesforce/schema/Lead';

import First_Name from '@salesforce/schema/Lead.FirstName';

import Last_Name from '@salesforce/schema/Lead.LastName';

import Email from '@salesforce/schema/Lead.Email';

import Phone from '@salesforce/schema/Lead.Phone'

 

export default class Blog_record_form extends LightningElement {

   objectApiName=Lead_Object;

   fields=[First_Name,Last_Name,Email,Phone];

   handleSuccess(event){

       const toastEvent = new ShowToastEvent({

           title: "Lead created",

           message: "Record ID: " + event.detail.id,

           variant: "success"

       });

       this.dispatchEvent(toastEvent);

 

   }

}

Update blog_record_form.js-meta.xml

<?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__AppPage</target>

       <target>lightning__RecordPage</target>

       <target>lightning__HomePage</target>

   </targets>

</LightningComponentBundle>