Lightning Data Service ( Lightning Record Form )

Lightning Data Service

Lightning data service is built on the top of User Interface API. Lightning Data Service provides other benefits aside from the code. It’s built on highly efficient local storage that’s shared across all components that use it. Records loaded in Lightning Data Service are cached and shared across components.

Lightning Data Service handles sharing rules and field-level security for you. In addition to simplifying access to Salesforce data, Lightning Data Service improves performance and user interface consistency.

Data access with Lightning Data Service is simpler than the equivalent using a server-side Apex controller. Read-only access can be entirely declarative in your component’s markup. For code that modifies data, your component’s JavaScript controller is roughly the same amount of code, and you eliminate the Apex entirely. All your data access code is consolidated into your component, which significantly reduces complexity.

A lightning-record-form base component enables you to quickly create forms to add, view, or update a record.

Syntax:

<lightning-record-form record-id={recordId} object-api-name={objectApiName} fields={fields} columns="2" layout="full/compact” mode="view/edit/readonly" onsubmit={handleSubmit}> </lightning-record-form>

The object-api-name attribute is always required, and the record-id is required only when you’re editing or viewing a record.

Layout types in your org:

• Full — The full layout corresponds to the fields on the record detail page. From the management settings for the object that you want to edit, go to Page Layouts.
• Compact — The compact layout corresponds to the fields on the highlights panel at the top of the record. From the management settings for the object that you want to edit, go to Compact Layouts.

Modes

The component accepts a mode value that determines the user interaction allowed for the form. The value for mode can be one of the following:

• edit — Creates an editable form to add a record or update an existing one. When updating an existing record, specify the record-id. Edit mode is the default when record-id is not provided and displays a form to create new records.
• view — Creates a form to display a record that the user can also edit. The record fields each have an edit button. View mode is the default when record-id is provided.
• readonly — Creates a form to display a record without enabling edits. The form doesn’t display any buttons.

Important Note:

• If we do not use the layout type then no fields will be visible until you specify in the controller.
• If you use the layout type then your specified field will not impact the layout, all the fields will be visible.
• lightning-record-form renders a field as required only if the field is marked as required on the object. If a field is marked as required only on a page layout, the form doesn’t render the field with the styling or validation for a required field.

Let’s explore the Real examples

Experiment

First, create the lightning component and add the below code to your JS file

import { LightningElement ,api, wire} from 'lwc';
import {getRecord,getFieldValue} from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';
export default class Lds extends LightningElement {
@api objectApiName;
@api recordId;
fields = ['AccountId', 'Name', 'Title', 'Phone', 'BillingAddress']
@wire(getRecord,{recordId:'$recordId',fields:NAME_FIELD})record;
get nameValue(){
return this.record.data ? getFieldValue(this.record.data,NAME_FIELD) : '';
}
}
}
}

Below code is Viewing a Record

<div class="row">
       <lightning-record-form object-api-name={objectApiName} layout-type="Full" columns="2" mode="view">
        </lightning-record-form>
</div>

Viewing a Record with Read-Only Fields

<template>
       <div class="container">
           <div class="row">
              <lightning-record-form record-id={recordId} object-api-name={objectApiName} layout-type="Full" mode="readonly">
              </lightning-record-form>
          </div>
       </div>
</template>

Editing a Record

<template>
   <div class="container">
      <div class="row">
        <lightning-record-form record-id={recordId} object-api-name={objectApiName} fields={fields} columns="2" mode="edit">             </lightning-record-form>
     </div>
   </div>
</template>

Creating a Record

To create a form that lets you create a record, do not specify a record-id. The form loads in edit mode by default when you don’t specify a record ID. Use object-api-name to pass the object API name for the record to be created. Specify the fields you want using the fields attribute, or use layout-type=”Full” to load all fields in the full layout.

Note: The compact layout cannot be used for creating records. If you specify layout-type=”Compact”, the full layout is shown. If you specify the fields attribute, be sure to include any fields that are designated as required for the object’s records.

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