[SalesForce] Fields required at layout level are not required in lightning-record-form lwc

I am trying to create a new button for a Custom object to add it in community.On clicking the button lightning-record-form will be displayed in edit mode to show input fields of the layout but what ever fields are required on the layout are not showed as required on the form.

Best Answer

As of Winter '20 you can make the lightning-input-field component required

lightning-input-field The following attribute is new.

required—To make an input field required only on the client, include the required attribute. Use this attribute to require a value in a field before the form can be submitted, and the field isn’t marked required in Setup. If the field doesn’t have a value, the component’s client-side validation catches the error before the form data is submitted to the server.

https://releasenotes.docs.salesforce.com/en-us/winter20/release-notes/rn_lwc_components.htm

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>

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

Best Answer

Related Solutions

[SalesForce] LWC: lightning-record-form is NOT respecting Page Layout

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

Inline Edit Fields

Edit Mode

Related Topic