How to create reusable Lightning Data Service Page in Lightning Web Component(LWC) Salesforce

by Rijwan Mohmmed
10 comments

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

  1. No need of apex class so no restriction of SQOL.
  2. Field Level Security(FLS) Applied.
  3. Can use in aura as well as LWC
  4. 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>
  1. record-id : Set record id of any object.
  2. object-api-name : Set object name.
  3. fields : List of fields to be displayed. The fields display in the order you list them.
  4. columns : Specifies the number of columns for the form
  5. mode : mode will be view, edit, readonly.
  6. 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>
    

You may also like

10 comments

area 52 September 23, 2021 - 3:02 am

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

Reply
Rijwan Mohmmed September 23, 2021 - 3:16 am

Thanks @area 52

Reply
Himanshu September 27, 2021 - 11:57 am

Great work… !! really helpful

Reply
Rijwan Mohmmed September 27, 2021 - 12:01 pm

Thanks @Himanshu

Reply
Latasha October 2, 2021 - 5:29 pm

Thanks for finally writing about > How to create reusable Lightning Data Service Page in Lightning Web Component(LWC) Salesforce
– Techdicer Latasha)

Reply
https://royalcbd.com/cbd-gummies October 3, 2021 - 11:17 am

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,

Reply
Deltax October 3, 2021 - 11:58 am

Thank you

Reply
Phuket escorted tours November 28, 2021 - 7:31 am

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

Reply
morrisgodoy February 24, 2022 - 8:49 pm

What’s up colleagues, good post and pleasant arguments commented here, I am in fact enjoying by these.

Reply
cialis online March 22, 2022 - 2:45 am

Asking questions are actually pleasant thing if you are not
understanding anything fully, but this article offers nice
understanding even.

Reply

Leave a Comment