JPs Blog

Applications
,

Lightning Data Service (LDS) in LWC

Published by

sfdcscout

on


Introduction

Lightning Data Service (LDS) allows Lightning Web Components (LWC) to interact with Salesforce records without requiring Apex. It provides built-in caching, security, and CRUD operations, making data management efficient and performance-optimized.

LDS offers the following key features:

  • Fetching records without Apex.
  • Caching for improved performance.
  • Automatic security enforcement.
  • Record updates across components.

Fetching a Record Using lightning-record-form

lightning-record-form is the easiest way to display, edit, or create a record without writing custom logic.

Example: Displaying a Record

<template>
    <lightning-record-form
        record-id="001XXXXXXXXXXXXXXX"
        object-api-name="Account"
        layout-type="Full"
        mode="readonly">
    </lightning-record-form>
</template>

Explanation:

  • The record-id attribute specifies the record to retrieve.
  • object-api-name defines the Salesforce object (e.g., Account).
  • layout-type="Full" displays all fields in the default layout.
  • mode="readonly" ensures the record is not editable.

Fetching a Record Using lightning-record-view-form

lightning-record-view-form provides more customization for displaying record data.

Example: Displaying Specific Fields

<template>
    <lightning-record-view-form record-id="001XXXXXXXXXXXXXXX" object-api-name="Account">
        <lightning-output-field field-name="Name"></lightning-output-field>
        <lightning-output-field field-name="Industry"></lightning-output-field>
    </lightning-record-view-form>
</template>

Explanation:

  • Allows customization by selecting specific fields to display.
  • Uses lightning-output-field to show record values.

Editing a Record Using lightning-record-edit-form

lightning-record-edit-form enables editing and saving records.

Example: Editing a Record

<template>
    <lightning-record-edit-form record-id="001XXXXXXXXXXXXXXX" object-api-name="Account">
        <lightning-messages></lightning-messages>
        <lightning-input-field field-name="Name"></lightning-input-field>
        <lightning-input-field field-name="Industry"></lightning-input-field>
        <lightning-button type="submit" label="Save"></lightning-button>
    </lightning-record-edit-form>
</template>

Explanation:

  • Uses lightning-input-field for editable fields.
  • lightning-button triggers record saving.
  • lightning-messages displays form validation errors.

Fetching a Record Using getRecord from uiRecordApi

For more control over record retrieval, use getRecord from @salesforce/uiRecordApi.

Example: Fetching an Account Record

JavaScript (recordFetcher.js)

import { LightningElement, wire, api } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';

export default class RecordFetcher extends LightningElement {
    @api recordId;
    accountName;

    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    wiredAccount({ error, data }) {
        if (data) {
            this.accountName = data.fields.Name.value;
        } else if (error) {
            console.error(error);
        }
    }
}

HTML (recordFetcher.html)

<template>
    <p>Account Name: {accountName}</p>
</template>

Explanation:

  • The @wire(getRecord, { recordId, fields }) fetches the record dynamically.
  • recordId is passed as an API property.
  • The account name is displayed dynamically.

Creating and Updating Records Using createRecord and updateRecord

LWC allows record creation and updates using JavaScript methods.

Example: Creating a New Account Record

JavaScript (recordCreator.js)

import { LightningElement } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';

export default class RecordCreator extends LightningElement {
    accountName = '';

    handleNameChange(event) {
        this.accountName = event.target.value;
    }

    createAccount() {
        const fields = {};
        fields[ACCOUNT_NAME_FIELD.fieldApiName] = this.accountName;
        
        const recordInput = { apiName: ACCOUNT_OBJECT.objectApiName, fields };
        createRecord(recordInput)
            .then(() => alert('Account created successfully!'))
            .catch(error => console.error(error));
    }
}

HTML (recordCreator.html)

<template>
    <lightning-input label="Account Name" onchange={handleNameChange}></lightning-input>
    <lightning-button label="Create Account" onclick={createAccount}></lightning-button>
</template>

Explanation:

  • Uses createRecord to create a new account.
  • Dynamically assigns values based on user input.

Conclusion

Lightning Data Service (LDS) simplifies Salesforce record handling in LWC.

  • Use lightning-record-form for quick implementations.
  • Use getRecord for more control.
  • Use createRecord and updateRecord for record modifications.

In the next post, we will explore Apex Integration in LWC for advanced data handling.

Stay tuned! 🚀

Previous Post
Next Post