2

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>
  • 1
    Are the fields displayed editable based on the FLS? You will get to see the edit option only if the field is editable. – Jayant Das Nov 26 '19 at 20:15
1

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

| improve this answer | |
  • OP is referring to inline edit with view mode. – Jayant Das Nov 26 '19 at 20:13
  • @JayantDas I have updated my Answer. – rahul gawale Nov 26 '19 at 20:27
  • I did read the documentation. As I sad i used view mode which is default mode and there is not even one field that i can edit. – Marcin Trofiniak Nov 27 '19 at 13:03
  • To simplify let's assume we want to edit with this form fields from Quote. Quote name and OppotunityId and we want to use mode view why are does fields not editable. – Marcin Trofiniak Nov 27 '19 at 13:09
  • 1
    In the end i found what was wrong. In object-api-name i did import it from salesforce and it seems then i works wrong when i changed it into String it worked just fine :) so in the way this message is good. – Marcin Trofiniak Dec 5 '19 at 14:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.