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:

<lightning-record-form

    record-id="IdOfParticularRecord"

    object-api-name="Account"

    layout-type="Compact"

    columns="1"

    mode="readonly">

</lightning-record-form>

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 which we will place on Account detail page.

recordDetailCheckComp.html

<template>

    <lightning-card

            variant="narrow"

            icon-name="standard:Account"

            title="custom detail view">

       <lightning-record-form

    record-id={recordId}

    object-api-name="Account"

    layout-type="Full"

    columns="2"

    mode="view">

</lightning-record-form>

    </lightning-card>

</template>

recordDetailCheckComp.js

import { LightningElement,api } from 'lwc';

 

export default class RecordDetailCheckComp extends LightningElement {

    @api recordId;

}

recordDetailCheckComp.js-meta.xml

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

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

    <apiVersion>50.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>

Output: