Salesforce Menu

Lightning Data Service

Lightning data service is made on top of API. This provides alternative edges other than the code. It’s designed on extremely economical native storage that’s shared across all elements that use it. Records loaded in this Service are cached and shared across elements(components).

Lightning Data Service manages sharing rules and field-level security directly. Additionally, by simplifying access to Salesforce information, Lightning Service improves performance and program consistency.

Data access with this Service is easier than the equivalent of employing a backend Apex controller. Read-only access is often entirely declarative in your component’s markup. All of our information access code is consolidated into our element, which considerably reduces complexness.

data-server-lightning

To access the data and get from the server we need LDS component they are

  1. Lightning-record-form
  2. Lightning-record-view-form
  3. Lightning-record-edit-form

Lightning-record-form

With the help of the Lightning record form we can add,view or update the record in salesforce.Lightning record form open the layout with all the fields in the view/edit format.It also offers some extra features.

  1. It provide the save and cancel button
  2. It is less customizable
  3. It Loads all the fields from an object in the form of full or compact layout.

Syntax:

<lightning-record-form
    record-id={recordId}
    object-api-name={objectApiName}
    layout-type="Full"
    mode="view">
</lightning-record-form>

  • Record-id: It accepts the object record id.
  • Object-api-name: Here we need to pass the object api name like Account,contact etc.
  • Layout-type: full or compact
  • Mode: View,readonly and edit.

Lightning record form with complete view

<template>
	<div class="container">
      
		<div class="row">
           <span><b>This will show the complete view</b></span>
           <lightning-record-form record-id={recordId} object-api-name={objectApiName} layout-type="Full" columns="2" mode="view">
           </lightning-record-form>
       </div>
   </div>

</template>




lightning-record

Salesforcedriller.js
import { LightningElement ,api, wire} from 'lwc';
export default class Lds extends LightningElement {
   @api objectApiName='Contact';
   @api recordId='0037F000029COXHQA4';
}

Output

Here we can see the complete view of the contact record.

contact-record

Lightning record form with Create view

It is very simple just you have to omit the record id from the lightning record form.

<template>
   <div class="container">
      
       <div class="row">
           <span><b>This will show the Create view</b></span>
           <lightning-record-form object-api-name={objectApiName} layout-type="Compact" columns="2" mode="view">
           </lightning-record-form>
       </div>
   </div>

</template>

lightning-create-view

lightning-complete-view-record

Lightning Record with Selected Field

We can show the selected fields in our layout with the help of field attributes.assign the fids in the controller (JS) file.

<template>
   <div class="container">
      
       <div class="row">
           <span>
               Lightning record with Custom fields

           </span>
           <lightning-record-form object-api-name={objectApiName} fields={fields}></lightning-record-form>
       </div>
   </div>

</template>


lightning-record-selected-field

Salesforcedriler.js
import { LightningElement ,api, wire} from 'lwc';
export default class Lds extends LightningElement {
   @api objectApiName='Account';
   fields = ['AccountId', 'Name', 'Title', 'Phone', 'BillingAddress'];
}


Salesforcedriler-js-record-field

lightning-record-custom-field

Lightning-record-view-form

Lightning-record-view-form is the component to show the salesforce record in the form of read only.Lightning record view form requires the record-id and the object-api-name in its attribute.This automatically controls the field level security and the sharing settings.

To show the records in the layout it uses the lightning-ouput-field component with field-name attribute.

Salesfrocedrller.html
<template>
   <div class="row">
       <span>
           Lightning record form with custom field layout
       </span>
       <lightning-record-view-form record-id={recordId} object-api-name={objectApiName} mode="edit">
           <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>
       </lightning-record-view-form>
   </div>

</template>


lightning-form-view-record

Salesforcedriller.js
import { LightningElement ,api, wire} from 'lwc';
export default class Lds extends LightningElement {
   @api objectApiName='Account';
   recordId='0017F0000249PrqQAE';
}


Salesforcedriller-js-record-view-form

Output

lightning-view-record-output

Lightning-Record-edit-form

Lightining-record-edit-form component is used to create or edit the salesforce object record.This shows the labels of the field with the pre-existing value. Lightniong-record-edit-form components also maintain the field level security and the sharing setting. To specify the editable field it uses the lightnin-input-field component.
Lightniong-record-edit-form implements the LDS and does not require any apex class to execute the backend process.

salesforcedriller.html
<template>
   <div class="row">
       <span>
           Lightning record edit   with custom layout

       </span>
      
        <lightning-record-edit-form object-api-name={objectApiName} record-id={recordId}>
          <div class="slds-col slds-size_1-of-2">
               <lightning-input-field field-name="Name"></lightning-input-field>
           </div>
           <lightning-button type="submit" label="Edit"></lightning-button>
          <lightning-messages></lightning-messages>
        </lightning-record-edit-form>
   </div>
</template>

salesforcedriller-record-edit-form-html

Salesfrocedriller.js
import { LightningElement ,api, wire} from 'lwc';
export default class Lds extends LightningElement {
   @api objectApiName='Account';
   recordId='0017F0000249PrqQAE';
}

Salesforcedriller-js-record-view-form

Output

lightning-record-edit-form-output

Subscribe Now