Sunday, September 18, 2022

How to create a record using lightning-record-form in LWC?

 We use the lightning-record-form to create forms to add, view, or update a record.

It is easier to build forms using lightning-record-form as compared to lightning-record-view-form and lightning-record-edit-form however lightning-record-form is less customizable. To customize the form layout or to provide custom rendering of data use lightning-record-view-form(view a record) and lightning-record-edit-form(add or update).  lightning-record-form implements Lightning Data Service and hence it doesn't require additional Apex controllers to create or edit record and it also takes care of field-level security and sharing, so users see only the data that they have access to. 

Sample syntax:








Important points to note:

  • The object-api-name attribute is always required, and the record-id is required only when you’re editing or viewing a record.

  • We use fields attribute to pass record field as an array of string. The fields are displayed in the order we list them.

  • We use layoutType attribute to specify a Full or Compact layout. If we use this then the field available on the layout are displayed in the form.
  • To specify the field order, we use fields without the layout-type attribute. It is not recommended to use the fields attribute with the layout-type attribute as the display order of the fields can vary.
  •  layout-type="Full"- The full layout corresponds to the fields on the record detail page.              
  •  layout-type="Compact" - The compact layout corresponds to the fields on the highlights panel at the top of the record. 
  • Not all standard object are supported.
           For ex: Event and task are not supported. External objects are also not supported.

  •       Modes:

         The value for mode can be one of the following mentioned below and it determines the user             interaction allowed for the form.

        1) edit - Creates an editable form to add a record or update an existing one.

        2) view - Creates a form to display a record that the user can also edit.

        3) readonly - Creates a form to display a record. In this case the form doesn't display any                      buttons.

If you do not specify the mode attribute, its default value is edit but if you specify the record-id
the default value of mode is view.

Let us create a lightning web component using lightning-record-form to create a record which we will place on Account detail page.



    <lightning-card title="Lightning Record Form to create a record">

    <lightning-record-form object-api-name="Account"

         columns="2" mode="edit" layout-type="Full" onsubmit={handleSubmit}>





import { LightningElement, api } from 'lwc';

import {ShowToastEvent} from 'lightning/platformShowToastEvent';

export default class LightningRecordFormEditExampleLWC extends LightningElement {

    @api recordId;


        const evt = new ShowToastEvent({

            title: 'Success Message',

            message: 'Record Created successfully ',

            variant: 'success',







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

<LightningComponentBundle xmlns="">








How to create a record using lightning-record-form in LWC?

No comments:

Post a Comment