Lightning-record-form Example

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

Using this component to create record forms is easier than building forms manually with lightning-record-edit-form or lightning-record-view-form. The lightning-record-form component provides these helpful features:

  • Switches between view and edit modes automatically when the user begins editing a field in a view form
  • Provides Cancel and Save buttons automatically 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

However, lightning-record-form is less customizable. To customize the form layout or provide custom rendering of record data, use lightning-record-edit-form (add or update a record) and lightning-record-view-form (view a record).

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

lightning-record-form implements Lightning Data Service and doesn’t require additional Apex controllers to create or edit record data. It also takes care of field-level security and sharing for you, so users see only the data that they have access to.

Limitations:
Does not support client side validation.
All standard objects are not supported like task, event.

recordForm.html

<template>
        <lightning-card title="Record Form Account Details">
                <lightning-layout>
                    <lightning-layout-item>
                        <lightning-record-form
                            record-id="0012w00000LTQKwAAP"
                            object-api-name="Account"
                            fields={selectedFields}
                            columns="2"
                            mode="edit">
                        </lightning-record-form>
                    </lightning-layout-item>
                </lightning-layout>
        </lightning-card>
</template>

recordForm.js

import { LightningElement } from 'lwc';
//import ACCOUNT_ID from '@salesforce/account/Id';
import ACCOUNT_NAME from '@salesforce/schema/Account.Name';
import ACCOUNT_TYPE from '@salesforce/schema/Account.Type';
import ACCOUNT_OWNER from '@salesforce/schema/Account.OwnerId';
export default class RecordForm extends LightningElement {
    selectedFields = [ACCOUNT_NAME, ACCOUNT_TYPE, ACCOUNT_OWNER];
}

recordForm.js-meta.xml

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

Output

image 38
Lightning-record-form Example 2

Scroll to Top