Step by Step walkthrough of lightning-record-edit-form and other base components | LWC
In this guide, we are going to walk you through the steps and try to explain the use of lightning-record-edit-form, lightning-record-form and lightning-record-view-form in very simple terms.
These are three standard base Lightning Components built on Lightning Data Services which can be used to communicate with Salesforce Data.
Using lightning-record-form
You can use lightning-record-form to quickly build a form and perform create, read or update operations on the Salesforce record. Creating a form using this component is the easiest way to do it as no customisation is required to build the form manually.
The framework provides all the UI elements(fields, buttons, alignment of fields), all you need to do is provide the object-api-name(API Name of the Object), record-id(Id of the record for that Object), fields to show or the layout-type attribute. Use the layout-type attribute to specify a Full or Compact layout.
Read the complete documentation HERE
Code Explanation
In the HTML file define the lightning-record-form and populate the object-api-name, record-id and fields attribute of this component.
object-api-name : Reference to the API Name of the Object.
record-id : Salesforce Id of the record that your want to render. Usually this is dynamically rendered by using this LWC Component in the Lightning Record Page.
fields : Array of fields(API Names) that you want to display as part of this component.
In the JS file, we first make reference to the fields that need to be displayed in the UI using ‘@salesforce/schema/<ObjectAPIName>.<FieldAPIName>’.
We then construct an array of all the fields in a variable, which will be used in the HTML Page.
@api is used to populate values of recordId and objectApiName from external source. For example, when using an LWC inside the Lightning Record Page of an Object, these values are populated with the Salesforce record id and Object’s API Name.
Using lightning-record-view-form
The lightning-record-view-form base component is used to show record data, with field values and labels, in view-only mode. The data is rendered based on the field type defined on Salesforce Object. You can customize the layout alignment and conditional visibility of the fields as per your choice.
To use lightning-record-view-form you need to pass the recordId and the fields that you want to display as attributes to this component.
Read the complete documentation HERE
Code Explanation
In the HTML file, we use the lightning-record-view-form component, give reference to the object API name using object-api-name and reference to the recordId using the record-id attributes.
We also need to mention the fields that we want to show in the lightning-record-view-form by using the lightning-output-field. Lightning-output-field is used to display the value of a field in the UI, all you need to do is pass the field API name to the field-name attribute.
In the JS file, we get references of the field API names, using ‘@salesforce/schema/<ObjectAPIName>.<FieldAPIName>’. These references are then used in the HTML file to display the field values of the record (record-id passes in lightning-record-view-form).
Using lightning-record-edit-form
The lightning-record-edit-form is used to build a form for creating new records or updating fields of an existing record. You have the flexibility to customize the form as per your choice, build js validations and a host of other things.
lightning-record-edit-form comes with the following features.
1. Create new records or Edit fields of an existing record.
2. Dynamic rendering of field based on certain actions for example, if the account type is “prospect” hide revenue field in the UI.
3. You can implement client-side JS Validations for specific use cases.
4. Create Salesforce Validations to prevent records from getting saved
Read the complete documentation HERE
Code Explanation
In the HTML file define the lightning-record-edit-form and populate the object-api-name and record-id similar to the previous components discussed above.
We can also create custom handler for each save event fired. In our code we created a handleSubmit (to intercept the form submission event and over-ride with custom logic) and handleSuccess (to handle the logic after form is submitted successfully).
In the JS file, we make reference to the fields that we want to display in the HTML file (similar to the above components discussed). We will focus our attention on the handler methods. To create a custom handler all you need to do is create a js function, in our example, we created handleSubmit and handleSuccess methods (you can name it anything) and mention them in the onsuccess and onsubmit attributes of the lightning-record-edit-form.
handleSubmit: Here we intercept the form getting saved and prevent its default behaviour using event.preventDefault(). We then take references of all the fields getting submitted and save field values using : this.template.querySelector(‘lightning-record-edit-form’).submit(fields);
In handleSubmit we can override any field values, and put in a js validation in place before manually saving the fields (..form’).submit(fields);)
handleSuccess: Here we can do post save functionalities, like let's say we want to show a toast message after the form is saved successfully or we want to do another DML operation after the previous data is saved.
onerror: You can also create a handler when an error occurs while saving the data using lightning-record-edit-form. You can take this as homework and try it out in your local org. Do let me know in the comments below if you are stuck somewhere.
Try out these examples and do provide your comments if you need more insights on these concepts.