Lightning Data Service – Lightning Record Form

We can show the Salesforce Record using lightning-record-from Salesforce base component which is based on LDS(Lightning Data Service). Even, System will allow to edit the record in standard way using this component.

We will show the user record by lightning-record-from component.

So, we have built a LWC named “showLRFRecord“.

Step 1: As per previous examples, we need to update the “showLRFRecord.js-meta.xml” file to set the visibility in Lightning App Builder.

showLRFRecord.js-meta.xml

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

Step 2: Need to write the respective HTML file.

showLRFRecord.html

<template>
        <lightning-card title="Showing User Record by Lightning Record Form"  icon-name="standard:user">
            <div class="slds-m-around_medium">
                <lightning-record-form object-api-name="User"
                                       record-id={userId}
                                       fields={fields}>
                </lightning-record-form>                                                  
            </div>
        </lightning-card>
</template>

Here, we have used lightning-record-from with object-api-name and fields attributes initially.

Step 3: Now, we need to work on the JS file.

showLRFRecord.js

import { LightningElement } from 'lwc';
import CURRENTUSERID from '@salesforce/user/Id';
import USER_NAME_FIELD from '@salesforce/schema/User.Name';
import USER_ALIAS_FIELD from '@salesforce/schema/User.Alias';
import USER_EMAIL_FIELD from '@salesforce/schema/User.Email';

export default class ShowLRFRecord extends LightningElement {

    userId = CURRENTUSERID;
    fields = [USER_NAME_FIELD, USER_ALIAS_FIELD, USER_EMAIL_FIELD];

}

We have built the array of fields using Salesforce Schema and set the fields property.

Step 4: At last, need to add this LWC into Lightning App/Home or Record Page. Or, you can call this component from another component.

Result

Important attributes for lightning-record-from

object-api-name: [Required] : need to provide sObject name. Remember, this component does not support all standard Objects such as Event, Task.
record-id: need to provide the record id for which you want to open the form.
mode: It may be “edit“, “view“, “readonly“.
Q. what is the difference between view and readonly mode?

You will get editable option if you will use “view” mode. It’s the default option. But, you will not get editable option if you will use “readonly” mode.

fields: need to provide the array of fields.
layout-type: It may be “Full” or “Compact“. It’s not recommended to use both fields and layout-type. Because, if you will use layout-type System will bring the fields from the layout definition automatically.
columns: define how many columns would be present in the UI.
record-type-id: It displays form based on record type.

Also, we can call a function on “onsuccess” event where we can provide the toast message after saving the record.
lightning-record-from does not support Client-Side Validations.

You can not customize the Save function using this component.

8,355 total views, 15 views today