[SalesForce] LWC record-form mode=view render fields in not editable format

So i am building LWC which i need to be able to edit fields on some records. I did add record-form element and it does work and render records but there is no way to edit them. As it is written in documentation fields in standard view mode should be displayed with edit icon on right side of the field allowing to enter edit mode.

I used this element for one custom object and standard one ( QuoteLineItem ) and had same result. Any one had similar problem? ( the fields displayed are controlled by compact layout and i do not want to use mode = edit cause it starts with buttons showed and i do not want to see them until user will click on field to edit something ).

Code:

<lightning-record-form record-id={_theQlListElement.Id} object-api-name={prObject} columns="3" layout-type="Compact"></lightning-record-form>

Best Answer

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

Related Topic