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.
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 recordedit - used to
edit/create the recordreadonly - 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
|
Custom Events
|
Custom Events
|
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.
Good one..thanks
ReplyDeleteHi bro..What is meant by "You can't add custom elements" in lightning-record-form ?
ReplyDeletewhat are custom elements, please let us know. Thanks
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