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.
To access the data and get from the server we need LDS component they are
- Lightning-record-form
- Lightning-record-view-form
- 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.
- It provide the save and cancel button
- It is less customizable
- 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>
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.
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 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>
Salesforcedriler.js
import { LightningElement ,api, wire} from 'lwc';
export default class Lds extends LightningElement {
@api objectApiName='Account';
fields = ['AccountId', 'Name', 'Title', 'Phone', 'BillingAddress'];
}
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>
Salesforcedriller.js
import { LightningElement ,api, wire} from 'lwc';
export default class Lds extends LightningElement {
@api objectApiName='Account';
recordId='0017F0000249PrqQAE';
}
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>
Salesfrocedriller.js
import { LightningElement ,api, wire} from 'lwc';
export default class Lds extends LightningElement {
@api objectApiName='Account';
recordId='0017F0000249PrqQAE';
}
Output
