Lesson: 23 | Edit a Record

recordId will get the Id of the related record.

HTML

<template>
    <lightning-record-edit-form record-id={recordId} object-api-name="Contact"
            onsuccess={handleSuccess} onsubmit ={handleSubmit}>
        <lightning-messages>
        </lightning-messages>
        <lightning-output-field field-name="AccountId">
        </lightning-output-field>
        <lightning-input-field field-name="FirstName">
        </lightning-input-field>
        <lightning-input-field field-name="LastName">
        </lightning-input-field>
        <lightning-input-field field-name="Email">
        </lightning-input-field>
        <lightning-button class="slds-m-top_small" variant="brand" type="submit" name="edit" label="Edit">
        </lightning-button>
    </lightning-record-edit-form>
</template>

JavaScript

import { LightningElement, api} from 'lwc';
export default class EditAccount extends LightningElement {
    @api recordId;
    handleSubmit(event) {
        console.log(event.detail.fields);
    }
    handleSuccess(event) {
        console.log(event.detail.id);
    }
}

XML

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

Prev You need to login to have access to the quizzes. Next

Mastered by 14 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Login to your account

Lesson: 23 | Edit a Record

HTML

Lightning Web Components