Switches between view and edit modes on Lightning Record Edit Form

The Lightning Record Edit Form base component does not allows to switch between view and edit mode as Lightning Record Form does out of the box. We can have the same functionality in Lightning Record Edit Form using very simple markup in this blog. Now, We can also ensure the fields are rendered with their labels and current values as read-only. Based on user interaction, fields can be toggled between view and edit modes on Lightning Record Edit Form.

Let’s create a simple Lightning Web Component named dualRecordForm. It’s time to deep dive into code:-

dualRecordForm.html

The reason we are able to achieve switching between view and edit modes is Salesforce has give two kind of fields to use with customizable record edit forms. They are lightning-input-field and lightning-output-field. We are using a property to switch between them. Lightning Output Field are being pared with button icon of type utility-edit to show pencil icon beside it.

<template>
    <lightning-record-edit-form record-id={recordId} object-api-name={objectApiName} onsuccess={handleSuccess}>
        <lightning-messages></lightning-messages>
        <template for:each={fieldList} for:item="field">
            <div key={field} class="slds-grid" if:false={showEditField}>
                <div class="slds-col slds-size_11-of-12">
                    <lightning-output-field field-name={field}>
                    </lightning-output-field>
                </div>
                <div class="slds-col slds-size_1-of-12">
                    <lightning-button-icon icon-name="utility:edit" onclick={handleEdit}>
                    </lightning-button-icon>
                </div>
            </div>
            <div key={field} class="slds-grid" if:true={showEditField}>
                <div class="slds-col slds-size_1-of-1">
                    <lightning-input-field field-name={field}>
                    </lightning-input-field>
                </div>
            </div>
        </template>
        <lightning-button type="submit" name="submit" label="Save">
        </lightning-button>
    </lightning-record-edit-form>
</template>

dualRecordForm.js

The javaScript have three property:-

1. fieldList – This is an array of string which contains field api name, You can adjust according to your requirement by exposing it so that value can be set from outside of this component.
2. showEditField – Controls the toggle between view and edit modes
3. recordId – It holds the current record id where the component has been loaded.
4. objectApiName – It holds the current object api name where the component has been loaded.

handleEdit fires when user clicks on button icon and toggle the view and edit modes. When the form is saved, view mode is show again.

import { LightningElement, api } from 'lwc';
export default class DualRecordForm extends LightningElement {
    @api fieldList = ["Name", "ParentId", "AccountNumber", "Phone"]; //harcoded the values assuming objectApiName is Account for demo purpose
    showEditField;
    @api recordId;
    @api objectApiName;
    handleSuccess(event) {
        this.showEditField = false;
    }
    handleEdit() {
        this.showEditField = !this.showEditField;
    }
}

dualRecordForm.js-meta.xml

We are exposing this component to only record pages.

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

Demo – Switch Between View and Edit Modes in Lightning Record Edit Form

Let’s deploy this component and add this to your account record lightning page. Once added, do not forget to activate the account record lightning page.

You can always extend this sample to your project. Feel free to get in touch with me if you have any doubt on this. To learn more check out this- LWC