Lightning Data Service (LDS) this is very innovative component made by Salesforce. By this component we can do update, insert, delete (DML) without calling apex class.
Important Highlights
- No need of apex class so no restriction of SQOL.
- Field Level Security(FLS) Applied.
- Can use in aura as well as LWC
- Reduce server load, database load, and network transfer by fetching data once.
Let understand with code..
<lightning-record-form
record-id = {recordId}
object-api-name = {object}
fields = {Fields}
columns = {columns}
mode = {displayMode}
record-type-id = {rectypeId}
>
</lightning-record-form>
- record-id : Set record id of any object.
- object-api-name : Set object name.
- fields : List of fields to be displayed. The fields display in the order you list them.
- columns : Specifies the number of columns for the form
- mode : mode will be view, edit, readonly.
- record-type-id : The ID of the record type, which is required if you created multiple record types but don’t have a default.
ReusableLDSDetailPage.Html :
<template>
<div class="slds-tabs_card">
<div class="slds-page-header">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-opportunity">
<lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
</span>
</div>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
<h1>
<span>Reusable LIghtning Data Service in LWC</span>
<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <br/>
<lightning-card
title={title} >
<div class="slds-p-around_medium">
<lightning-record-form
record-id = {recordId}
object-api-name = {object}
fields = {lwcFields}
columns = {columns}
mode = {displayMode}
>
</lightning-record-form>
</div>
</lightning-card>
</template>
ReusableLDSDetailPage.js :
import { LightningElement, api } from 'lwc';
export default class ReusableLDSDetailPage extends LightningElement {
@api objectApiName;
@api recordId;
@api title;
@api columns;
@api dynamicFields;
@api displayMode;
@api error;
@api object;
//Pass fields up for lightning data service
get lwcFields(){
//parse fields from string to string[]
var fieldsList = this.dynamicFields.replace(/\s/g, '').split(',');
fieldsList = fieldsList.filter(function (el) {
return el != null && el!='';
});
return fieldsList;
}
}
ReusableLDSDetailPage.js-meta.xml :
<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>51.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
<target>lightning__Tab</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage, lightning__HomePage">
<property name="title" label="Title" type="String" default="Contact Information"/>
<property name="object" label="object" type="String" default="Contact"/>
<property name="columns" label="Columns" type="Integer" min="1" max="6" default="2"/>
<property name="dynamicFields" label="Fields To Display" type="String" default="Name"/>
<property name="displayMode" label="Read or Edit Mode" type="String" default="view" datasource="view, edit, readonly"/>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
What’s your Reaction?
+1
+1
+1
+1
+1
+1
Total views : 1064417
11 comments
whoah this weblog is fantastic i really like studying your posts.
Keep up the great work! You understand, lots of
individuals are looking round for this info, you could aid them greatly.
Also visit my web-site; area 52
Thanks @area 52
Great work… !! really helpful
Thanks @Himanshu
Thanks for finally writing about > How to create reusable Lightning Data Service Page in Lightning Web Component(LWC) Salesforce
– Techdicer Latasha)
It’s actually a cool and helpful piece of info.
I’m happy that you just shared this useful info with us.
Please keep us informed like this. Thanks for sharing.
Take a look at my blog: do cbd gummies cause a positive drug test; https://royalcbd.com/cbd-gummies,
Thank you
We’re a group of volunteers and starting a new scheme in our community.
Your web site offered us with useful information to work
on. You’ve performed a formidable activity and our whole group will likely be thankful to you.
Feel free to surf to my blog post Phuket escorted tours
What’s up colleagues, good post and pleasant arguments commented here, I am in fact enjoying by these.
Asking questions are actually pleasant thing if you are not
understanding anything fully, but this article offers nice
understanding even.
What’s up, all the time i used to check weblog posts here early
in the morning, because i like to find out more and more.