Mastering Lightning Data Service (LDS) in Lightning Web Components (LWC): Best Practices for Salesforce Developers 2024-25

Lets Perform CRUD Operations with LDS

We will apply LDS in fetching data (getRecord), creating the record form (createRecord) & update the existing record (updateRecord) without writing any apex code.

This is how we import all the three :

<code>import { LightningElement, api, track, wire } from 'lwc';
import { createRecord, getRecord, updateRecord } from 'lightning/uiRecordApi';</code>

Lets start will individual operation beginning with getRecord :

We have fetched above details from an account record id using the getRecord :

JS :

<code>import { LightningElement, wire, api } from 'lwc';
//1. Import methods -> getRecord and getFieldValue

import { getRecord, getFieldValue } from "lightning/uiRecordApi";

//2. Import reference to the object and the fields
import NAME_FIELD from "@salesforce/schema/Account.Name";
import RATING_FIELD from "@salesforce/schema/Account.Rating";
import INDUSTRY_FIELD from "@salesforce/schema/Account.Industry";

const fields = [NAME_FIELD, RATING_FIELD, INDUSTRY_FIELD];

export default class LdsGetRecord extends LightningElement {

  @api
  recordId = '0015i00000TVZNjAAP';

//3. Wire the output of the out of the box method getRecord to the property account
  @wire(getRecord, {
    recordId: "$recordId",
    fields
  })
  account;

  renderedCallback() {
    console.log(this.account.data);
  }
  
  //4. Fetch the field values from the record
  get name() {
    return getFieldValue(this.account.data, NAME_FIELD);
  }

  get rating() {
    return getFieldValue(this.account.data, RATING_FIELD);
  }

  get industry() {
    return getFieldValue(this.account.data, INDUSTRY_FIELD);
  }




}</code>

HTML :

Account Name : {name} Account Industry : {industry} Account Rating : {rating}

Meta-XML :

<code><?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<masterLabel>lds get record</masterLabel>
	<apiVersion>60.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__AppPage</target>
	</targets>
</LightningComponentBundle></code>

Note: In case we want to retrieve multiple records , use -> "getRecords", to learn more click here

Now, lets jump to createRecord

Here, in order to create a record we need a UI where we can provude user inputs such as Name, Industry , Email etc etc..

Here, we have to take help of something called Base lightning components which are basically build on top of lightning Data Service.

What are base lightning components ?

There are three types :

• lightning-record-form: This is a form which has a standard lightning UI and is used to create, view or edit a record. Official documentation here.
• lightning-record-edit-form: This is a form which is used to create record with specified fields or update fields in an existing record. Official documentation here.
• lightning-record-view-form: This is a form which is used to display specific fields data of a record in read-only mode

First, lets understand lightning-record-form :

Create this form and provide recordId and object Name and it will automatically fetch details:

Since Lead source is blank, lets put some value, when you will click on edit/pencil icon, below ui will appear and you can edit and save the record.

now after saving we can see :

JS:

<code>import { LightningElement, api } from 'lwc';
import NAME_FIELD from '@salesforce/schema/Contact.Name';
import PHONE_FIELD from '@salesforce/schema/Contact.Phone';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';
import LEAD_FIELD from '@salesforce/schema/Contact.LeadSource';


// in case iwe want to use in a managed package with your custom object
//import MY_CUSTOM_OBJECT from '@salesforce/schema/namespace__Custom_object__c';

export default class LightningRecordForm extends LightningElement {

    // Expose a field to make it available in the template
    fields = [NAME_FIELD,PHONE_FIELD,EMAIL_FIELD,LEAD_FIELD];

    // Flexipage provides recordId and objectApiName
    @api recordId = '0035i000012ONzMAAW';
    @api objectApiName = 'Contact';


}</code>

HTML :

Meta-xml :

<code><?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<masterLabel>lightning record form</masterLabel>
	<apiVersion>60.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__AppPage</target>
	</targets>
</LightningComponentBundle></code>

Lets assume instead of only these few fields, we want to see all the fields , in that case we can add -> layout-type="Full" :

<code><div class="slds-p-left_medium">
            <lightning-record-form
                object-api-name={objectApiName}
                record-id={recordId}
                fields={fields}
                layout-type="Full"
            >
            </lightning-record-form>
</div></code>

Then our form will look like :

Similarly we can add mode="View", mode="edit" as well in case of different scenarios. You can check the official documentation for further details from here

In case of custom form development we can utilize createRecord by passing the fields:

<code>createRecord({ apiName: 'Account', fields: { Name: 'New Account' } })
  .then(result => {
    // Handle success
  })
  .catch(error => {
    // Handle error
  });</code>

in case of updateRecord :

<code>updateRecord({ fields: { Id: recordId, Name: 'Updated Name' } })
  .then(result => {
    // Handle success
  })
  .catch(error => {
    // Handle error
  });</code>

in case of delete:

Here, please note, there is no direct way of deleting a record from LDS, one way to do that is we utilize the updateRecords with value 'IsDeleted = true'.

So, you can follow the above given steps to build standard or custom forms, take user inputs and utilize standard Lightning data services and minimise apex coding dependency and then you wont be needing to write apex classes which in turn save a lot of time.

Enjoy coding, i would like all the practitioners to go through this important topic which is related to aggregate queries by clicking here . This will be very useful in your daily coding activities. If you get stuck anywhere, please feel free to reach me out..