Salesforce LWC: Lightning Data Service - What, Why, When and Which?

By -
Today in this topic we will understand about Lightning Data Service in Lightning Web Component. At the end of this topic we will able to determine below points:

  1. What is Lightning Data Service?
  2. Why to use Lightning Data Service?
  3. When to use Lightning Data Service?
  4. Which Lightning Data Service to use?

What is Lightning Data Service?

From Salesforce Documentation- Lightning Data Service is centralised data caching framework, which is use to load, create, update and delete the data in Salesforce without Salesforce Server side Apex Code.

Why to use Lightning Data Service?

Below are the few reasons of using Lightning Data Service in Lightning Web Component:
  • No need of additional apex code to get data by making additional server side call.
  • Lightning Data Service supports Sharing Rule and Field Level Security.
  • Because of not writing additional Apex Class code, it will improve component's performance.
  • It cache the result locally on Client Side.
  • It supports all standard and custom Objects of Salesforce.
When to use Lightning Data Service?

Below are the scenarios when we can use Lightning Data Service in LWC:
  1. Load a record
  2. Edit a record
  3. Create a record
Which Lightning Data Service to use?

Below are the 3 possible ways which allows user to view, edit and create records in Salesforce:
  1. lightning-record-form
  2. lightning-record-edit-form
  3. lightning-record-view-form
If above 3 options are not giving you enough flexibility then use wire service.
Let us fill below table after understanding each use case.

Scenario    lightning-record-form    lightning-record-edit-form    lightning-record-view-form     
    

Scenario 1: Load Record

If user want to load a record in Salesforce. Then User can go with below 2 base components:
  • lightning-record-form: Using this base component we just need to pass the record Id and we will get the exact same layout of the record. If you want to show specific fields on component then also we can use this base component.
In below example we have passed the record Id of Account record to lightning-record-form. 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<template>
    <div style="background-color: white;" class="slds-p-around_x-small">
        <lightning-card  variant="Narrow"  title="Account (lightning-record-form)" icon-name="standard:account">
            <div class="slds-p-horizontal_small">
                <lightning-record-form record-id={recordId} object-api-name="Account" layout-type="Full" mode="view">
                </lightning-record-form>
            </div>
        </lightning-card>
    </div>
</template>

1
2
3
4
5
import { LightningElement, api} from 'lwc';

export default class LightningDataServiceExamples extends LightningElement {
    @api recordId = '0017F00002MfGO9QAN';
}

So in case if we need to show actual record page layout then lightning-record-form. 
  • lightning-record-view-form: Now we can use lightning-record-view-form also for loading Salesforce data. But it will not show actual layout of the record. If user want specific field of any record then we can go with this option.
In below example also we are using same Java Script which we have used in above example. 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<template>
    <div style="background-color: white;" class="slds-p-around_x-small">
        <lightning-card  variant="Narrow"  title="Account (lightning-record-view-form)" icon-name="standard:account">
            <div class="slds-p-horizontal_small">
                <lightning-record-view-form record-id={recordId} object-api-name="Account">
                    <div class="slds-grid">
                        <div class="slds-col slds-size_1-of-2">
                            <lightning-output-field field-name="Name"></lightning-output-field>
                            <lightning-output-field field-name="Phone"></lightning-output-field>
                        </div>
                        <div class="slds-col slds-size_1-of-2">
                            <lightning-output-field field-name="Industry"></lightning-output-field>
                            <lightning-output-field field-name="AnnualRevenue"></lightning-output-field>
                        </div>
                    </div>
                </lightning-record-view-form>
            </div>
        </lightning-card>
    </div>
</template>


Now let us see what is the difference in both base component in loading data.

 Scenario

lightning-record-form
lightning-record-view-form
 Load Data    Yes Yes 
 Edit Data  Yes  No
 Inline EditingYesNo
 View only DataYesYes
 Show actual record page layout Yes  Yes (But need to add all fields manually - not preferred)
 Show specific field of recordYesYes
 Display custom page layout**NoYes
 Show formatted dataNo Yes (Use getRecord or getRecordUI wire adapter)

** Custom Page Layout means we can customise page layout in lightning-record-view-form but we cannot customise lightning-record-form. In customisation we can show data in different sections, use lightning-formatted-text to customise data etc.



Scenario 2: Edit Record

To edit Salesforce record we can use below 2 base components:
  • lightning-record-form:  This base component will give you actual record page layout in edit mode. Also we can specify set-of field which we want to see in edit mode of record.
This is exact same as above code which we used for loading data. The only difference is the value of mode attribute on lightning-record-form tag which is EDIT.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<template>
    <div style="background-color: white;" class="slds-p-around_x-small">
        <lightning-card  variant="Narrow"  title="Account (lightning-record-form)" icon-name="standard:account">
            <div class="slds-p-horizontal_small">
                <lightning-record-form record-id={recordId} object-api-name="Account" layout-type="Full" mode="edit">
                </lightning-record-form>
            </div>
        </lightning-card>
    </div>
</template>

If you want to specify specific field in lightning-record-form then import field using schema api to get field informations.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<template>
    <div style="background-color: white;" class="slds-p-around_x-small">
        <lightning-card  variant="Narrow"  title="Account (lightning-record-form for specific fields)" icon-name="standard:account">
            <div class="slds-p-horizontal_small">
                <lightning-record-form record-id={recordId} object-api-name="Account" fields={fields}>
                </lightning-record-form>
            </div>
        </lightning-card>
    </div>
</template>

Below is the Javascript to get the specific fields information:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import { LightningElement, api} from 'lwc';
import ACCOUNT_ID from '@salesforce/schema/Account.Id';
import ACCOUNT_NAME from '@salesforce/schema/Account.Name';
import ACCOUNT_PHONE from '@salesforce/schema/Account.Phone';
import ACCOUNT_TYPE from '@salesforce/schema/Account.Type';
import ACCOUNT_WEBSITE from '@salesforce/schema/Account.Website';


export default class LightningDataServiceExamples extends LightningElement {
    @api recordId = '0017F00002MfGO9QAN';
    fields = [ACCOUNT_ID, ACCOUNT_NAME, ACCOUNT_PHONE, ACCOUNT_TYPE, ACCOUNT_WEBSITE];
}

  • lightning-record-edit-form:  This base component cannot show full record edit page by passing record id. But we can create custom page layout using this base component.
Also using this lightning-record-edit-form we can use field reset functionality which is not possible in lightning-record-form.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<template>
    <lightning-record-edit-form
        object-api-name='Account'
        record-id={recordId}>
    <lightning-messages></lightning-messages>
    <div class="slds-grid">
        <div class="slds-col slds-size_1-of-2">
            <lightning-input-field field-name="Name"></lightning-input-field>
            <lightning-input-field field-name="Title"></lightning-input-field>
        </div>
        <div class="slds-col slds-size_1-of-2">
            <lightning-input-field field-name="Website"></lightning-input-field>
            <lightning-input-field field-name="Type"></lightning-input-field>
        </div>
    </div>
    <div class="slds-m-top_medium">
        <lightning-button type="submit" variant="brand" label="Save Account"></lightning-button>
    </div>
</template>

 Scenario    lightning-record-formlightning-record-edit-form
 Edit Data     Yes  Yes
 Edit specific fields of recordYes Yes
 Reset fields valuesNo Yes
 Customise ComponentNo Yes
 Overriding default save behaviourNo  Yes


Scenario 3: Create Record

Creating record is similar to Editing record. The only difference is for record creation we don't need to pass record-id value to lightning-record-form or lightning-record-edit-form. 

 Scenario    lightning-record-formlightning-record-edit-form
 Create Data     Yes  Yes
 Create data with specific fieldsYes Yes
 Reset fields valuesNo Yes
 Customise ComponentNo Yes
 Overriding default save behaviourNo  Yes


Now let's take a look on all scenarios and see when to use which lightning base component:

Scenario    lightning-record-form    lightning-record-edit-form    lightning-record-view-form     
 Create data Yes Yes No
 Create data with specific fields Yes Yes No
 Create data with custom layout No  Yes No
 Override default behaviour during record creation No Yes No 
 Edit data Yes Yes No
 Edit data with specific fields Yes Yes No
 Edit data with custom layout No Yes No
 Override default behaviour during record edit No Yes No
 View data Yes No Yes
 View data with specific fields Yes No Yes
 View data with custom layout No No Yes

Apart from these base component we can use wire service from which we can create, update and delete the Salesforce data without using apex code.

References:
Other Useful blogs:
  • https://www.sfprompt.com
  • https://manish-porwal.blogspot.com
Location: London, UK

Comments

Post a Comment

Followers

Popular posts from this blog

Salesforce LWC: Multi-Record Creation using Lightning Web Component

By -
Image
In this blog we will learn about one very common business use case. Most of the time we get requirement to create a table kind of view from which we can see most of the record's information and also we can manage creating updating and deleting record from same view.  So in this blog we will see how to create such kind of UI using Lightning Web Component. We will take one use case and will implement the same. Use Case:  There will be one input field for Account selection. Once user select any account then user can see all related Contacts. Also user should have capability to add multiple new contacts for selected Account and user can delete existing Contacts. Solutions: To implement above solution first we need one input field where user can select Account Name. For this we can utilize Lightning Data Service. Once User will select Account we can pass the Account Id to Apex Class for getting related Contacts and show it on UI using HTML table. Lets see some code for the UI: 1 ...
Read more

Salesforce LWC: Basic Drag and Drop Functionality

By -
Image
Recently I attended Salesforce VirtualDearmin session and I found this session very interesting and I thought to share this with everyone of you. For more detail you can refer below link on Drag and Drop Functionality: https://forcementor.github.io/lwc_dnd_20/#/ In this blog we will see about Drag and Drop functionality in Salesforce using Lightning Web Component. To implement drag and drop functionality there are few standard HTML events which we will use to implement. Lets see first what we are going to achieve in this blog with a small video- Now we have clear understanding what we are going to achieve. Let us go to the code. First we will create very basic UI with 3 layout-item. One for each New Task, In Progress Task and Completed Task. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <template> <lightning -layout vertical-align= "stretch" multiple-rows= "true" class= "x-large" > <lightning -layout-item...
Read more

Salesforce Lightning Web Component: Dynamic Column Selection in Lightning Datatable

By -
Image
Today in this post we will see how to create Lightning Data Table where we can dynamically select the columns of lightning data table. Below are the properties of this Lightning Data Table: User can select any column for Lightning Data Table User can select only those fields on which user has FLS. User can re-arrange the order of Columns in Data Table. So in UI we will show one Dual List box where user can select any field for table. Once user will select the fields and click on save then selected fields will be visible on UI: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <template> <lightning -card title= "Dynamic Lead Table" > <lightning -button label= "Modify Columns" slot= "actions" onclick= {showColumnSelectionWindow} > < /lightning-button> <p class= "slds-p-horizontal_small" > <lightning -...
Read more