Lightning Data Service in LWC

Below are 3 base Lightning components built on Lightning Data Service (LDS),

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

Note:
It is always suggested to use above 3 components and if the above 3 components don't give enough flexibility, then use a wire adapter like getRecord and getFieldValue(record, field).

1. lightning-record-form

Using <lightning-record-form> we can create quick form to create, modify and view a record. There is no need to create manually like other 2 (lightning-record-edit-form and lightning-record-view-form)

Limitations:
Does not support client side validation.
All standard objects are not supported like task, event.

Code format:

<lightning-record-form
 record-id="Id of the record which you want to use"
 object-api-name="API name of the object which you want to use"
 layout-type="Full / Compact"
 fields="Fields you want to display."
 columns="Number of column you want to display"
 mode="view / edit / readonly">
</lightning-record-form>

Mode Details ==>
In view mode there will be a edit icon in each field and save, cancel button for editing is available,
but while mode is readonly then field will be shown as output field.
If mode is edit then UI will shown edit form with save and cancel button and after save the content it will return to view mode.

Mode default value is View.


===================================================================
A sample example of <lightning-record-form>. We can dynamically fetch the record id, but for simplicity I am taking hard code Account Id for this example.


Note: Please change the account id value as per your record.
===================================================================

recordForm.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="recordForm">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>   
    </targets>
</LightningComponentBundle>

recordForm.html

<template>
        <lightning-card title="Account Details">
                <lightning-layout>
                    <lightning-layout-item>
                        <lightning-record-form
                            record-id="0017F00GHHG01b7ll2QAA"
                            object-api-name="Account"
                            fields={selectedFields}
                            columns="2"
                            mode="edit">
                        </lightning-record-form>
                    </lightning-layout-item>
                </lightning-layout>
        </lightning-card>
</template>

recordForm.js

import { LightningElement } from 'lwc';

//import ACCOUNT_ID from '@salesforce/account/Id';
import ACCOUNT_NAME from '@salesforce/schema/Account.Name';
import ACCOUNT_TYPE from '@salesforce/schema/Account.Type';
import ACCOUNT_OWNER from '@salesforce/schema/Account.OwnerId';

export default class RecordForm extends LightningElement {

    selectedFields = [ACCOUNT_NAME, ACCOUNT_TYPE, ACCOUNT_OWNER];
}

Output:

2. lightning-record-view-form
===================================================================
A sample example of <lightning-record-view-form>. We can dynamically fetch the record id, but for simplicity I am taking hard code Account Id for this example.

Note: Please change the account id value as per your record.
===================================================================

recordViewForm.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="recordViewForm">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>   
    </targets>
</LightningComponentBundle>

recordViewForm.html

<template>
        <lightning-card title="Account Details Record View Form">
                <lightning-layout>
                    <lightning-layout-item>
                        <lightning-record-view-form
                            record-id="0017F000HGFH7ll2QAA"

                            object-api-name="Account">
                            <lightning-output-field field-name="Name"></lightning-output-field>
                            <lightning-output-field field-name="Type"></lightning-output-field>
                            <lightning-output-field field-name="OwnerId"></lightning-output-field>
                            <lightning-output-field field-name="LastModifiedById"></lightning-output-field>
                        </lightning-record-view-form>
                    </lightning-layout-item>
                </lightning-layout>
        </lightning-card>
</template>

Output:

3. lightning-record-edit-form
===================================================================
A sample example of <lightning-record-edit-form>. We can dynamically fetch the record id, but for simplicity I am taking hard code Account Id for this example.
===================================================================

recordEditForm.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="recordEditForm">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>   
    </targets>
</LightningComponentBundle>

recordEditForm.html

<template>
        <lightning-card title="Account Details Record Edit Form ..">
            <lightning-layout>
                <lightning-layout-item>
                    <lightning-record-edit-form
                    object-api-name="Account"
                    onsuccess={handleSuccess}>
                        <!-- We can use this simple version like designing of indivisual input field -->
                        <lightning-input-field field-name={accountName}></lightning-input-field> 
                        <lightning-input-field field-name={accountType}></lightning-input-field>

                        <!-- Or we can use the other version like designing multiple input fields using for loop. -->
                        <!--<template if:true={selectedFields}>
                            <template for:each={selectedFields} for:item="field">
                                <div key={field}>
                                    <lightning-input-field field-name={field}></lightning-input-field>
                                </div>
                            </template>
                        </template>-->

                        <lightning-button variant="brand" type="submit" name="save" label="Save"></lightning-button>
                    </lightning-record-edit-form>
                </lightning-layout-item>
            </lightning-layout>
        </lightning-card>
</template>

recordEditForm.js

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT_NAME from '@salesforce/schema/Account.Name';
import ACCOUNT_TYPE from '@salesforce/schema/Account.Type';

export default class RecordEditForm extends LightningElement {
    accountName = ACCOUNT_NAME;
    accountType = ACCOUNT_TYPE;
    
    //selectedFields = [ACCOUNT_NAME, ACCOUNT_TYPE];
        
    handleSuccess(){
        if(this.recordId !== null){
            this.dispatchEvent(new ShowToastEvent({
                    title: "SUCCESS!",
                    message: "New record has been created.",
                    variant: "success",
                }),
             );
                
        }
    }
}

Output:

LDS is built on top of User Interface API (UI API). UI API is a public Salesforce API that Salesforce uses to build Lightning Experience and Salesforce for iOS and Android.
We can build Salesforce UI very easy using UI API.

LDS structure,

1. Create Lightning Web Component using LDS.
2. LDS use UI API to connect Database.

Response from UI API supports CURD access, FLS, sharing settings. To enjoy these features we have to use LWS wire adapters (lightning/ui*Api).

Here we use TypeScript formatting and it's format is as follows,

function name, parameter name and type, and a return type (Optional parameters are appended with ?).

createRecord(recordInput: Record, originalRecord?: Record): Record


************************************************
Please check my next post for lightning/uiObjectInfoApi and lightning/uiRecordApi examples.
************************************************