Difference between record-form record-edit-form & record-view-form | LWC

Telegram logo Join our Telegram Channel
Hello Trailblazers 👋


In this post, we will see the simplified difference between record forms: lightning-record-form, lighting-record-view-form, and lighting-record-edit-form in the Lightning Web Component Framework.

I have summarized the important points from the documentation and added those in the tabular format so that it will help you to choose the right component as per your requirements. 

Difference between record-form record-edit-form &
    record-view-form | LWC


lightning-record-form lightning-record-view-form lightning-record-edit-form
Create record forms to view, create, and edit records with very less coding. Create customizable record display forms with read-only mode. Create customizable record edit, view forms. You can also add some read-only fields.
Requires you to specify the object-api-name attribute Requires you to specify the object-api-name attribute requires you to specify the object-api-name attribute
The record-id is required in the edit mode The record-id is required to load the record The record-id is required to load an existing record.
No additional apex class required to load/create/update a record. No additional apex class required to load a record. No additional apex class required to load/create/update a record.
The mode attribute is required.

view - used to load the record

edit - used to edit/create the record

readonly - record is opened in read-only mode
The record is always opened in the read-only mode. The record is always opened in the edit mode.
The layout-type attribute is used to specify a Full or Compact layout. The fields configured by admin in the layouts are auto rendered on the form.

Full - all fields configured on the full page layout of the record are rendered.

Compact - all fields configured on the compact layout are rendered.
No fields attribute. Fields are rendered using lightning-output-field component nested inside the lightning-record-view-form No fields atttribute. Fields are rendered using lightning-input-field component nested inside the lightning-record-edit-form
The fields attribute is used to mention a list of fields to be rendered. - -
The component expects the fields attribute or the layout-type attribute - -
Save and Cancel buttons are added automatically - Need to add a button with the submit to save the record. Also a cancel button is needed which can call the reset() function.
lightning-record-form does not support prepopulating of the fields when the form is loaded - Use the value attribute on lightning-input-field to prepopulate the field value.
If there are record types on the object, picklist values are loaded based on the record types.

You must provide the record-type-id attribute if you have multiple record types and you don't have a default record type. Otherwise, the default record type id is used.
Not need as it's the read-only mode. If there are record types, picklist values are loaded based on the record types.

You must provide the record-type-id attribute if you have multiple record types and you don't have a default record type. Otherwise, the default record type id is used.
Use the columns attribute to define the number of columns Use the lightning-layout and lightning-layout-item to create a multi-column layout Use the lightning-layout and lightning-layout-item to create a multi column layout
You don't have the flexibility to add an empty space in the field grid between two fields. You can add an empty space in the field grid using an empty layout-item between two fields You can add an empty space in the field grid using an empty layout-item between two fields
You can't add custom elements You can add custom elements to display fields You can add custom elements to display/update fields
Custom Events

  • error
  • load
  • submit
  • success
Custom Events

  • load
Custom Events

  • error
  • load
  • submit
  • success
You can use the cancel button to reset the form. - To reset the form fields to their initial values, use the reset() method on the lightning-input-field.
Does not support custom UI level validations - You can add custom UI level validations on the lightning-input-field components.


Thanks for visiting! Let me know if you know some other differences between these components or you want me the cover any other specific topic related to Salesforce Development and Web Development.

3 comments:
  1. Hi bro..What is meant by "You can't add custom elements" in lightning-record-form ?
    what are custom elements, please let us know. Thanks

    ReplyDelete
    Replies
    1. If you want add a custom input or output element let's say for customized styling, that you can't do with "lightning-record-form" as it renders the default UI for the fields. But you can use "lightning-input", html "input" instead of "lightning-input-field" if needed in "record-edit-form".

      Delete

Hi there, comments on this site are moderated, you might need to wait until your comment is published. Spam and promotions will be deleted. Sorry for the inconvenience but we have moderated the comments for the safety of this website users. If you have any concern, or if you are not able to comment for some reason, email us at rahul@forcetrails.com