lightning-record-edit-form example for quick updating the data Salesforce LWC

lightning-record-edit-form example for quick updating the data Salesforce LWC

Sample Code:

LWC HTML:

<template>

    <div class=”slds-box slds-theme_default”>

        <lightning-record-edit-form object-api-name=”Case” 
                                    onsuccess={handleSuccess}
                                    record-id={recordId}>

           
            <div class=”slds-grid slds-wrap”> 
                <div class=”slds-col slds-size_1-of-2″>                             
                    <lightning-input-field field-name=”Task_1_Completed__c”> 
                    </lightning-input-field> 
                </div> 
                <div class=”slds-col slds-size_1-of-2″> 
                    <lightning-input-field field-name=”Task_2_Completed__c”> 
                    </lightning-input-field> 
                </div> 
                <div class=”slds-col slds-size_1-of-2″>                             
                    <lightning-input-field field-name=”Task_3_Completed__c”> 
                    </lightning-input-field> 
                </div> 
            </div>      
            <lightning-button class=”slds-m-top_small” 
                              type=”submit” 
                              label=”Update”> 
                            </lightning-button>                           

        </lightning-record-edit-form>

    </div>
</template>


LWC JS:

import { LightningElement, api } from ‘lwc’; 
import { ShowToastEvent } from ‘lightning/platformShowToastEvent’;
 
export default class CaseEditPage extends LightningElement { 
 
    @api recordId; 

    handleSuccess( event ) { 
         
        const toastEvent = new ShowToastEvent({ 
            title: ‘Case Updated’, 
            message: ‘Case Updated Successfully!!!’, 
            variant: ‘success’ 
        }); 
        this.dispatchEvent( toastEvent ); 
 
    }

}


LWC JS meta.xml:
<?xml version=”1.0″ encoding=”UTF-8″?> 
<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata” fqn=”CaseEscalation”> 
    <apiVersion>48.0</apiVersion> 
    <isExposed>true</isExposed>   
    <targets>     
        <target>lightning__RecordPage</target>     
    </targets>     
    <targetConfigs>     
        <targetConfig targets=”lightning__RecordPage”>     
            <property name=”recordId” type=”String” label=”Record Id” description=”Record Id”/>     
        </targetConfig>   
    </targetConfigs>    
</LightningComponentBundle>
Output:

Leave a Reply