Inline Edit Fields
Viewing a Record with Option to Edit Fields
Use mode="view"
and pass the ID of the record and the corresponding
object API name to be displayed. Specify the fields using the fields
attribute, or layout-type attribute to display all the fields defined
on the Full
or Compact
layout.
The view mode loads the form using output fields with inline editing
enabled. You can edit fields that are marked updateable in the User
Interface API. If the user clicks an edit icon next to a field, all
fields that are updateable become editable, and the form displays
Cancel and Save buttons.
Edit Mode
As per documentation
To edit a record, pass the ID of the record and the corresponding
object API name to be edited. Specify the fields using the fields
attribute, or layout-type attribute to load all the fields defined on
the Full or Compact layout.
Please find below the example for the same.
HTML
<template>
<lightning-record-form record-id={recordId} object-api-name="Account" layout-type="Compact" columns="1"
mode="edit">
</lightning-record-form>
</template>
JS
import { LightningElement, api } from 'lwc';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
export default class recordFormDemo extends LightningElement {
// The record page provides recordId and objectApiName
@api recordId;
@api objectApiName;
fields = [NAME_FIELD, REVENUE_FIELD, INDUSTRY_FIELD];
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);
}
}
You can override the standard save functionality using onsave
event.
Refer