Let’s explore the usage of the lightning-record-form tag to interact with a single record and execute DML operations.
This tag is slightly more advanced compared to the other two tags, namely lightning-record-edit-form and lightning-record-view-form.
Unlike the aforementioned two tags, where we must specify the fields we intend to work with, here is a snippet providing an explanation!
<template>
<lightning-record-view-form
object-api-name="Account"
record-id={recordId}>
<lightning-output-field field-nam="Name"></lightning-output-field>
<lightning-output-field field-nam="Industry"></lightning-output-field>
<lightning-output-field field-nam="Rating"></lightning-output-field>
</lightning-record-view-form>
</template>
Upon observation, it’s evident that we explicitly list the fields one by one. When the requirement involves tasks such as field highlighting or demanding more precise control over the fields, the previously mentioned tags become useful.
However, when dealing with an object that has numerous fields (let’s say 100 or more) and we are not inclined to manually display them in sequence, the preferred choice would be the lightning-record-form tag.
Let’s examine a snippet utilizing this tag!
<template>
<lightning-record-form
record-id={recordId}
object-api-name="Account"
layout-type="Full"
mode="view"
>
</lightning-record-form>
</template>
We are dynamically passing values to the record-id. Currently, I am manually setting the value for object-api-name, but it can also be made dynamic.
Additionally, there’s an attribute named layout-type that can be utilized. We can assign either Full or Compact as the value.
When set to Full, all the fields from the page layout are automatically retrieved and displayed without the need to specify each field name separately.
Similarly, when set to Compact, all fields from the compact page layout are fetched and displayed.
import { LightningElement, api } from "lwc";
export default class ExpRecordForm extends LightningElement {
@api recordId;
}
Also, there is an attribute called mode to which we can provide 3 values which are namely readonly edit and view.
- readonly – if the mode is readonly record will be fetched in readonly format.
- edit – in this mode, the record is fetched in edit mode. Edit functionality is fully functional. Once the record is created or updated the record gets to view mode.
- view – In this mode, the record can be viewed but edit icons will be given to edit the record.
If we don’t provide record-id then the same tag can be used to create a record. If the record-id is provided then we can update the record.
Easy isn’t it?
Wait! There is a catch.
What if you are not interested in displaying all the fields of the page layout and what if you are interested in displaying (let’s say) only 10 fields from the list of all fields.
In that case, we can use a new attribute called fields. To this attribute, we need to pass an array of fields that we are interested in fetching and displaying.
<template>
<lightning-record-form
record-id={recordId}
object-api-name="Account"
fields={fields}
mode="view"
>
</lightning-record-form>
</template>
Let’s look at the controller of the Web Component(check the comments).
import { LightningElement, api } from "lwc";
//import the reference to fields
import NAME_FIELD from "@salesforce/schema/Account.Name";
import INDUSTRY_FIELD from "@salesforce/schema/Account.Industry";
import RATING_FIELD from "@salesforce/schema/Account.Rating";
export default class ExpRecordForm extends LightningElement {
@api recordId;
//create an array type property
fields = [NAME_FIELD, INDUSTRY_FIELD, RATING_FIELD];
}
A significant benefit is the absence of the need to write any logic for saving or updating the record. There’s no requirement to create a button through code either.
I trust this information proves valuable!