Lightning Record Form , View Form And Edit Form .

by

Use the lightning-record-view-form component to create a form that displays Salesforce record data for specified fields associated with that record. The fields are rendered with their labels and current values as read-only.

You can customize the form layout or provide custom rendering of record data. If you don’t require customizations, use lightning-record-form instead.

To specify read-only fields, use lightning-output-field components inside lightning-record-view-form.

lightning-record-view-form requires a record ID to display the fields on the record. It doesn’t require additional Apex controllers or Lightning Data Service to display record data. This component also takes care of field-level security and sharing for you, so users see only the data they have access to.

To access raw record data or create a form that needs more customization than the lightning-record-*-form components allow, use Lightning Data Service wire adapters and functions, such as those from the lightning/ui*Api module.

Lightining : recordForm

				
					<template>
    <lightning-card title="Lightning Record Form In Lwc">
        <lightning-record-form
            record-id={recordId}
            object-api-name={objectApiName}
            fields={fields}
            columns=2
            mode=edit
            onsubmit={handleSubmit}>
        </lightning-record-form>
    </lightning-card>
</template>
				
			
				
					import { LightningElement ,api} from 'lwc';
import Name from '@salesforce/schema/Account.Name';
import Phone from '@salesforce/schema/Account.Phone';
import Rating from '@salesforce/schema/Account.Rating';
import Revenue from '@salesforce/schema/Account.AnnualRevenue';
import Industry from '@salesforce/schema/Account.Industry';
export default class LightningRecordForm extends LightningElement {
    @api recordId;
    @api objectApiName;
    fields = [Name, Revenue, Industry, Phone, Rating];

    handleSubmit(event) {
        event.preventDefault(); // stop the form from submitting
        const fields = event.detail.fields;
        fields.LastName = 'My Custom Last Name'; // modify a field
        this.template.querySelector('lightning-record-form').submit(fields);
    }
}
				
			
				
					<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>True</isExposed>
    <targets>
        <target>lightning__HomePage</target>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Output

Lightning :RecordEdit Form

				
					<template>
    <lightning-card  title="Lightning Record Edit Form">
    <lightning-record-edit-form object-api-name={objectName} onsuccess={handleSuccess} onsubmit ={handleSubmit}>
        <lightning-messages>
        </lightning-messages>
        <lightning-input-field field-name="Name">
        </lightning-input-field>
        <lightning-input-field field-name="Phone">
        </lightning-input-field>
        <lightning-input-field field-name="AccountNumber">
        </lightning-input-field>
        <lightning-input-field field-name="AnnualRevenue">
        </lightning-input-field>
        <lightning-input-field field-name="Rating">
        </lightning-input-field>
        <lightning-input-field field-name="Type">
        </lightning-input-field>
            <lightning-button class="slds-var-top_small slds-button_success --slds-c-button-brand-text-color" variant="success" type="submit" label="Create" onsubmit ={handleSubmit}>
            </lightning-button>
    </lightning-record-edit-form>
    </lightning-card>
</template>
				
			
				
					import { LightningElement ,api,track} from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class LightningRecordEditformInLwc extends LightningElement {
    @api records;
    @api objectName = 'Account';

    handleSubmit(event) {
        console.log('onsubmit event recordEditForm' + event.detail.fields);
        const evt = new ShowToastEvent({
            title: 'Message',
            message: 'The record has been created successfully.',
            variant: 'success',
            mode: 'dismissable'
        });
        this.dispatchEvent(evt);
        this.isModalOpen = false;
    }
    handleSuccess(event) {
        console.log('onsuccess event recordEditForm', event.detail.id);
    }
}
				
			
				
					<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>True</isExposed>
    <targets>
        <target>lightning__HomePage</target>
        <target>lightning__AppPage</target>
    </targets>
</LightningComponentBundle>

Output

Lightining : RecordView Form

				
					<template>
    <lightning-card title="Lightning Record View Form" >
        <lightning-record-view-form record-id={recordId} object-api-name="Account">
                    <lightning-output-field field-name="Name"></lightning-output-field>
                    <lightning-output-field field-name="Website"></lightning-output-field>
                    <lightning-output-field field-name="Industry"></lightning-output-field>
                    <lightning-output-field field-name="AnnualRevenue"></lightning-output-field>
                    <lightning-output-field field-name="Phone"></lightning-output-field>
          
        </lightning-record-view-form>
    </lightning-card>
</template>
				
			
				
					import { LightningElement ,api} from 'lwc';

export default class LightningRecordViewFormInLwc extends LightningElement {
  
    @api recordId;
    
}
				
			
				
					<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
     <isExposed>True</isExposed>
    <targets>
        <target>lightning__HomePage</target>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Output :

Uttam Kumar (Salesforce Developer)

Leave a Comment