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

by Rijwan Mohmmed

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..

               record-id = {recordId}
               object-api-name = {object}
               fields = {Fields}
               columns = {columns}
               mode = {displayMode}
               record-type-id = {rectypeId}
  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 :

    <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>
						<div class="slds-media__body">
							<div class="slds-page-header__name">
								<div class="slds-page-header__name-title">
										<span>Reusable LIghtning Data Service in LWC</span>
										<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
	</div> <br/>
    title={title} >  
    <div class="slds-p-around_medium">  
               record-id = {recordId}
               object-api-name = {object}
               fields = {lwcFields}
               columns = {columns}
               mode = {displayMode}

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="">
        <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"/>

What’s your Reaction?

You may also like


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

Rijwan Mohmmed September 23, 2021 - 3:16 am

Thanks @area 52

Himanshu September 27, 2021 - 11:57 am

Great work… !! really helpful

Rijwan Mohmmed September 27, 2021 - 12:01 pm

Thanks @Himanshu

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 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;,

Deltax October 3, 2021 - 11:58 am

Thank you

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

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.

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 February 7, 2023 - 12:43 am

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.


Leave a Comment