September 20, 2023

Lightning Data Service (LDS)

• Standard controller of LWC.
• FLS(Field Level Security) embed by default.
• Respect the security and sharing settings.
• No need to write Server side controller to make CRUD.
• LDS returns data and metadata at the same time.
• It cache data if connection interrupted it will sync the data when connection is back.
• lightning-record-edit-form, and lightning-record-view-form, lightning-record-form.

1- Lightning Record Form

recordFormLWC.html

<template>
    <lightning-card title="Contact">
        <lightning-record-form object-api-name={objectApiName} record-id={recordId} fields={fields}>
        </lightning-record-form>
    </lightning-card>
</template>

recordFormLWC.js

import { LightningElement, api } from 'lwc';
import NAME_FIELD from '@salesforce/schema/Contact.Name';
import PHONE_FIELD from '@salesforce/schema/Contact.Phone';


export default class RecordFormLWC extends LightningElement {
    fields = [NAME_FIELD,PHONE_FIELD];


    @api recordId;
    @api objectApiName;
}

2- Lightning Record Edit Form

recordEditFormLWC.html

<template>
    <lightning-card title="Contact">
        <lightning-record-edit-form object-api-name={objectApiName} record-id={recordId}>
            <lightning-input-field field-name={nameField}> </lightning-input-field>
            <lightning-input-field field-name={phoneField}> </lightning-input-field>
            <div class="slds-align_absolute-center">
                <lightning-button variant="brand" type="submit" label="Save">
                </lightning-button>
            </div>
        </lightning-record-edit-form>
    </lightning-card>
</template>

recordEditFormLWC.js

import { LightningElement, api } from 'lwc';
import NAME_FIELD from '@salesforce/schema/Contact.Name';
import PHONE_FIELD from '@salesforce/schema/Contact.Phone';


export default class RecordEditFormLWC extends LightningElement {
    nameField = NAME_FIELD;
    phoneField = PHONE_FIELD;


    @api recordId;
    @api objectApiName;
}

3- Record View Form

recordViewFormLWC.html

<template>
    <lightning-card title="Contact">
        <lightning-record-view-form object-api-name={objectApiName} record-id={recordId}>
            <lightning-output-field field-name={nameField}> </lightning-output-field>
            <lightning-output-field field-name={phoneField}> </lightning-output-field>
        </lightning-record-view-form>
    </lightning-card>
</template>

recordViewFormLWC.js

import { LightningElement, api } from 'lwc';
import NAME_FIELD from '@salesforce/schema/Contact.Name';
import PHONE_FIELD from '@salesforce/schema/Contact.Phone';


export default class LightningRecordViewFormDemo extends LightningElement {
    nameField = NAME_FIELD;
    phoneField = PHONE_FIELD;


    @api recordId;
    @api objectApiName;
}

Lightning Data Service in LWC

Promise in LWC

5 2 votes

Article Rating

Subscribe

Login

Notify of

new follow-up comments new replies to my comments

Label

{} [+]

Name*

Email*

Website

Label

{} [+]

Name*

Email*

Website

0 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments