Delete Record LWC Example.

Scenario:
Display list of 10 Account records and each row contains a radio button for record selection. Select any record by click on radio button and then click on a Delete button for record deletion.

Solution:
1. Create a method [getListOfAccounts()] under an apex class [AccountHandler.apxc].
2. Make this method [getListOfAccounts()] as @AuraEnabled. This method will return 10 account records.

AccountHandler.apxc

public with sharing class AccountHandler {

    @AuraEnabled(cacheable=true)
    public static List<Account> getListOfAccounts(){
        return [SELECT Id, Name, AccountNumber FROM Account LIMIT 10];
    }
}

3. Now create below LWC component to call the above apex method to display 10 accounts with radio button on each row and a delete button for deletion.

deleteRecord.js-meta.xml

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

deleteRecord.html

<template>
    <lightning-card title="Account Details">
        <lightning-layout multiplerows="true" verticalalign="center">
            <lightning-layout-item padding="around-small" size="3">
                <template if:true={lstOfAccounts.data}>    
                    <table class="slds-table slds-table_bordered slds-border_left slds-border_right">
                        <thead>
                            <tr class="slds-line-height_reset">
                                <th class="" scope="col">
                                    <div class="slds-truncate" title="Select">Select</div>
                                </th>
                                <th class="" scope="col">
                                    <div class="slds-truncate" title="Name">Name</div>
                                </th>
                                <th class="" scope="col">
                                    <div class="slds-truncate" title="accId">Account Id</div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <template for:each={lstOfAccounts.data} for:item="acc">
                                <tr key={acc.Name} class="slds-line-height_reset">
                                    <td>
                                        <lightning-input name="rdNm" type="radio" label="" value={acc.Id} onchange={handleChanges} ></lightning-input>
                                    </td>
                                    <td>
                                        <div class="slds-truncate" title="Name">{acc.Name}</div>
                                    </td>
                                    <td>
                                        <div class="slds-truncate" title="accId">{acc.Id}</div>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                    <br/>
                    <button onclick={deleteAccountRecord}>Delete</button>
                </template>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

deleteRecord.js

import { LightningElement, wire } from 'lwc';
import getListOfAccounts from '@salesforce/apex/AccountHandler.getListOfAccounts';
import { deleteRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ApexCall extends LightningElement {
    selectedRecIdValue;
    @wire(getListOfAccounts) lstOfAccounts;

    // Fetch user input.
    handleChanges(event){
        this.selectedRecIdValue = event.target.value;
        //console.log("selectedRecIdValue----------"+this.selectedRecIdValue);
    }

    deleteAccountRecord(event){
        deleteRecord(this.selectedRecIdValue)
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Record Is  Deleted',
                        variant: 'success',
                    }),
                );
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error While Deleting record',
                        message: error.message,
                        variant: 'error',
                    }),
                );
            });
    }
}

OUTPUT:

Apex call from LWC Example

Scenario: Display list of 10 Account records using LWC component.

Solution:
1. Create a method [getListOfAccounts()] under an apex class [AccountHandler.apxc].
2. Make this method [getListOfAccounts()] as @AuraEnabled

AccountHandler.apxc

public with sharing class AccountHandler {

    @AuraEnabled(cacheable=true)
    public static List<Account> getListOfAccounts(){
        return [SELECT Id, Name, AccountNumber FROM Account LIMIT 10];
    }
}

3. Now create below LWC component to call the above apex method and finally display the result.

apexCall.js-meta.xml

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

apexCall.html

<template>
    <lightning-card title="Account Details">
        <lightning-layout multiplerows="true" verticalalign="center">
            <lightning-layout-item padding="around-small" size="3">
                <template if:true={lstOfAccounts.data}>    
                    <table class="slds-table slds-table_bordered slds-border_left slds-border_right">
                        <thead>
                            <tr class="slds-line-height_reset">
                                <th class="" scope="col">
                                    <div class="slds-truncate" title="Name">Name</div>
                                    </th>
                                    <th class="" scope="col">
                                    <div class="slds-truncate" title="accId">Account Id</div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <template for:each={lstOfAccounts.data} for:item="acc">
                                <tr key={acc.Name} class="slds-line-height_reset">
                                    <td>
                                        <div class="slds-truncate" title="Name">{acc.Name}</div>
                                    </td>
                                    <td>
                                        <div class="slds-truncate" title="accId">{acc.Id}</div>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </template>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

apexCall.js

import { LightningElement, wire } from 'lwc';
import getListOfAccounts from '@salesforce/apex/AccountHandler.getListOfAccounts';

export default class ApexCall extends LightningElement {
    @wire(getListOfAccounts) lstOfAccounts;
}

OUTPUT:

lightning/uiRecordApi Example (Update Record)

This is an example to edit an existing record.

updateRecord.js-meta.xml

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

updateRecord.html

<template>
    <lightning-card title="Update Account Details ..">
            <lightning-layout>
                <lightning-layout-item>
                    <lightning-input label="Account Name" value={accName} onchange={handleChanges} class="slds-m-bottom_x-small"></lightning-input>                        
                    <br/>
                    <lightning-input label="Account Site" value={accSite} onchange={handleChanges} class="slds-m-bottom_x-small"></lightning-input>
                    <br/>
                    <button onclick={updateAccountRecord}>Update</button>
                </lightning-layout-item>
            </lightning-layout>
        </lightning-card>
</template>

updateRecord.js

import { LightningElement, wire, api, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import { updateRecord } from 'lightning/uiRecordApi';
import ACCOUNT_ID from '@salesforce/schema/Account.Id';
import ACCOUNT_NAME from '@salesforce/schema/Account.Name';
import ACCOUNT_SITE from '@salesforce/schema/Account.Site';
import  ACCOUNT_OWNER from '@salesforce/schema/Account.Owner.Name';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class GetRecord extends LightningElement {
    @api recordId;
    @track accSite;
    @track accName;
    inputLabel;
    inputValue;
    
    // Fetch account details.
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME, ACCOUNT_SITE], optionalFields: [ACCOUNT_OWNER] })
    accountRecord({data, error}){
        if(data){
            this.accName = data.fields.Name.value;
            this.accSite = data.fields.Site.value;
        } else if(error){
            console.log("error === "+error);
        }
    }

    // Fetch user input.
    handleChanges(event){
        this.inputLabel = event.target.label;
        this.inputValue = event.target.value;
        if( this.inputLabel === "Account Name" && this.inputValue !== null && this.inputValue !=='' && this.inputValue !== undefined)            
            this.accName = event.target.value;
        if( this.inputLabel === "Account Site" && this.inputValue !== null && this.inputValue !=='' && this.inputValue !== undefined)
            this.accSite = event.target.value;
    }

    // Perform create action.
    updateAccountRecord(){
        const fields = {};
        fields[ACCOUNT_ID.fieldApiName] = this.recordId;
        fields[ACCOUNT_NAME.fieldApiName] = this.accName;
        fields[ACCOUNT_SITE.fieldApiName] = this.accSite;
        
        const recordInput = { fields };

        updateRecord(recordInput)
            .then(()=> {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Account Id ' + this.recordId + ' has been updated successfully.',
                        variant: 'success',
                    }),
                );
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Updating error',
                        message: error.body.message,
                        variant: 'error',
                    }),
                );
            });
    }
}

Output ==> (Put the lwc component under account record page)

lightning/uiRecordApi Example (Get Record)

Example to get a record.
Note: For simplicity I have use hard coded record id for this example under getRecord.js file, so please modify this id with your record id you want to fetch. 

getRecord.js-meta.xml

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

getRecord.html

<template>
    <lightning-card title="Get Account Details">
            <lightning-layout>
                <lightning-layout-item>
                    Account Name : {accName}
                    <br/>
                    Account Site : {accSite}
                </lightning-layout-item>
            </lightning-layout>
        </lightning-card>
</template>

getRecord.js

import { LightningElement, wire, api, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import ACCOUNT_NAME from '@salesforce/schema/Account.Name';
import ACCOUNT_SITE from '@salesforce/schema/Account.Site';
import  ACCOUNT_OWNER from '@salesforce/schema/Account.Owner.Name';

export default class GetRecord extends LightningElement {
    @api recordId;
    @track accSite;
    @track accName;
    @track accOwner;

    @wire(getRecord, { recordId: '0017F0dgfdsfxIQQA0', fields: [ACCOUNT_NAME, ACCOUNT_SITE], optionalFields: [ACCOUNT_OWNER] })
    accountRecord({data, error}){
        if(data){
            this.accName = data.fields.Name.value;
            this.accSite = data.fields.Site.value;
        } else if(error){
            console.log("error === "+error);
        }
    }
}

Output:

lightning/uiRecordApi Example (Create Record)

Create Record example.

createRecord.js-meta.xml

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

createRecord.html

<template>
    <lightning-card title="Create Account">
        <lightning-layout>
            <lightning-layout-item>
                <lightning-input label="Account Name" onchange={handleChanges} class="slds-m-bottom_x-small"></lightning-input>
                <br/>
                <lightning-input label="Account Site" onchange={handleChanges} class="slds-m-bottom_x-small"></lightning-input>
                <br/>
                <button onclick={createAccountRecord}>Create</button>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

createRecord.js

import { LightningElement } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_NAME from '@salesforce/schema/Account.Name';
import ACCOUNT_SITE from '@salesforce/schema/Account.Site';

export default class CreateRecord extends LightningElement {
    accountId;
    inputLabel;
    inputValue;
    accName;
    accSite;
    
    // Fetch user input.
    handleChanges(event){
        this.inputLabel = event.target.label;
        this.inputValue = event.target.value;
        if( this.inputLabel === "Account Name" && this.inputValue !== null && this.inputValue !=='' && this.inputValue !== undefined)            
            this.accName = event.target.value;
        if( this.inputLabel === "Account Site" && this.inputValue !== null && this.inputValue !=='' && this.inputValue !== undefined)
            this.accSite = event.target.value;
    }

    // Perform create action.
    createAccountRecord(){
        const fields = {};
        fields[ACCOUNT_NAME.fieldApiName] = this.accName;
        fields[ACCOUNT_SITE.fieldApiName] = this.accSite;

        const recordInput = { apiName: ACCOUNT_OBJECT.objectApiName, fields };

        createRecord(recordInput)
        .then(account => {
            this.accountId = account.id;
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Account Id ' + this.accountId + ' is created successfully.',
                    variant: 'success',
                }),
            );
        })
        .catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error while creating account record',
                    message: error.body.message,
                    variant: 'error',
                }),
            );
        });
    }
}

Output:

lightning/uiObjectInfoApi Example (getPicklistValuesByRecordType)

getPicklistValuesByRecordType will fetch all picklist for a specific object.

getPicklistValuesByRecordType.js-meta.xml

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

getPicklistValuesByRecordType.html

<template>
    <lightning-card title="Get All Picklist Values.">
        <lightning-combobox name="accountSource"
                            label="Account Source"
                            value={selectedValue}
                            placeholder="Select"
                            options={accountSourceLOV}
                            onchange={performBusinessLogic} >
        </lightning-combobox>
        
        <lightning-combobox name="active"
                            label="Active"
                            value={selectedValue}
                            placeholder="Select"
                            options={activeLOV}
                            onchange={performBusinessLogic} >
        </lightning-combobox>
    </lightning-card>
</template>

getPicklistValuesByRecordType.js

import { LightningElement, track, wire} from 'lwc';
import { getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class PicklistValuesDemo extends LightningElement {
    @track selectedValue;
    @track accountSourceLOV;
    @track activeLOV;

    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    objectInfo;

    @wire(getPicklistValuesByRecordType, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', objectApiName: ACCOUNT_OBJECT})
    allPicklistValues({data, error}){
        if(data){
            //Standard picklist field.
            this.accountSourceLOV = data.picklistFieldValues.AccountSource.values;
            //Custom picklist field.
            this.activeLOV = data.picklistFieldValues.Active__c.values;
        } else if(error){
            console.log("error === "+error);
        }
    }

    
    performBusinessLogic(event){
        this.selectedValue = event.detail.value;
        console.log("selectedValue === "+this.selectedValue);
    }
}

Output ==>

lightning/uiObjectInfoApi Example (getPicklistValues)

Suppose we want to fetch "Type" picklist value of Account object.

getPicklistValues.js-meta.xml

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

getPicklistValues.html

<template>
    <lightning-card title="Get Picklist Values">
        <template if:true={typePicklistValues.data}>
            <lightning-combobox name="type"
                                label="Account Type"
                                value={selectedValue}
                                placeholder="Select"
                                options={typePicklistValues.data.values}
                                onchange={performBusinessLogic} >
            </lightning-combobox>
        </template>
    </lightning-card>
</template>

getPicklistValues.js

import { LightningElement, track, wire} from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import Type_FIELD from '@salesforce/schema/Account.Type';

export default class PicklistValuesDemo extends LightningElement {
    @track selectedValue;

    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    objectInfo;

    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: Type_FIELD})
    typePicklistValues;

    performBusinessLogic(event){
        this.selectedValue = event.detail.value;
        console.log("selectedValue === "+this.selectedValue);
    }
}

Output:

lightning/uiObjectInfoApi Example (record id and object api fetching)

1. Example to fetch record Id and object API.

recordIdFetching.js-meta.xml

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

recordIdFetching.html

<template>
    <lightning-card title="Record Id Fetching">
        <lightning-layout>
            <lightning-layout-item>
                Record Id : {recordId} <br/>
                Objcet API : {objectApiName}
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

recordIdFetching.js

import { LightningElement, api } from 'lwc';

export default class RecordIdFetching extends LightningElement {
    @api recordId;
    @api objectApiName;
}

Finally deploy it in our auth org and keep in mind to configure this LWC component under any lighting record page.
Once done open the record where you configure the above component using lighting record page.

Output:
It will shown record id and object api name.

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