lightning-record-form in LWC

In this post, we will implement lightning-record-form in LWC to create, edit, and view the record, all-in-one using a single base component. In the previous post, we implemented the same using lightning-record-edit-form to create the record and lightning-record-view-form to show the record which you can check here.

This is probably the last post about Lightning Data Service and I have saved the best one for last.

Using lightning-record-edit-form and lightning-record-view-form, we can create and display records with very minimal JS Controller code. But we still have to use lightning-input-field and lightning-output-field to get and display the fields of the record.

Using lightning-record-form, we don’t have to use the lightning-input-field and lightning-output-field as well.

Implementation

In this implementation, we will accept the Name, Account Number, Phone, Type, and Website from User and will display the same once the Account is created.

Create a component ldsRecordForm. Add lightning-record-form tag and provide below attributes:

  • object-api-name : API name of the Object
  • mode : readonly (only for viewing), view (for viewing but can be made editable) and edit (to create and edit the record).
  • record-id : Id of the Record. For readonly and view mode, it represents the Id of record to fetch. For edit, if it is blank it will create a new record. If Id is available, it will display the record details in edit mode.
  • fields or layout-type : We can use either fields or layout-type. IF we use fields, we have to provide an array of fields. If we use layout-type, we have to provide either Full or Compact to display the fields of the respective layout.
  • columns : To display records in columns. For example, if provided 2, it will display fields in two columns.

We can also add handlers like onsuccess to perform some logic once the record is created or edited.

ldsRecodForm.html

<template>
    <lightning-card title="Create and View Account Record">
        <div class="slds-p-horizontal_small">
        
            <lightning-record-form object-api-name="Account" record-id={strRecordId}
            columns="2" mode="edit" fields={arrayFields}></lightning-record-form>
        </div>
    </lightning-card>
</template>

In JS Controller, add arrayFields array with the name of fields to display, which is assigned to fields attribute in the form. If we are using layout-type, we don’t have to create this array.

ldsRecordForm.js

import { LightningElement } from 'lwc';
export default class LdsRecordForm extends LightningElement {
    strRecordId;
    arrayFields = ['Name', 'AccountNumber', 'Phone', 'Type', 'Website'];
}

This is enough to create and edit the record using lightning-record-form.

Keep in Mind

While providing list of fields in arrayFields, rather than providing hard coded field name like “Name” or “Phone“, we should import the field from @salesforce/schema module like below:

import NAME_FIELD from '@salesforce/schema/Account.Name';

Then use NAME_FIELD in arrayFields. The advantage of doing this is that, if we use the hard coded values, we won’t be notified if we are deleting a field from object. If we import the field from Schema and use it in arrayFields, user cannot delete the field until the reference of the field is removed from component.

lightning-record-form in LWC

This is how our implementation looks like:

lightning-record-form in LWC
lightning-record-form in LWC

This is how we can use the lightning-record-form in LWC.

If you don’t want to miss new posts, please Subscribe here.

In case you want to know more about Lighting Data Service using Lightning Web Components, you can check official Salesforce documentation here.

Leave a Comment