Easy Guide: Ways to Create & Fetch Record Data in LWC | lightning-record-edit-form | wire adapters

In the current Salesforce ecosystem, having hands-on experience in Lightning Web Component (LWC) is one of the most sought-after skills. Some developers have the basic knowledge of LWC but lack in-depth knowledge of the framework and its best practices. This article is going to be very useful for developers who have just started scratching the surface of LWC. Today we are going to learn different ways to Create & Fetch Record Data in LWC.

Note: This is a high-level article to make you aware of the possible options to perform CRUD operations on Salesforce data from LWC.

So, What are we going to learn in this tutorial?

In this tutorial, we are going to cover the possible ways to perform CRUD operations on Salesforce Data.

1. Using Base Lightning Components provided by the Salesforce platform makes working with Salesforce data super easy. (EASY: Minimal code required HTML/JS, No APEX). Detailed Tutorial HERE
2. Using wire services provided by the Lightning framework. (INTERMITTENT: Some amount of JS code required, No APEX) Detailed Tutorial HERE
3. Use Apex to get better control over your data and how you design the complete UI/UX in LWC. (ADVANCED: JS and APEX involved) Detailed Tutorial HERE

Using Base Lightning Components built on Lightning Data Services

There are three main Standard Base Lightning Components built on Lightning Data Services which can be used to easily interact with Salesforce Data.

1. lightning-record-form: You can use lightning-record-form to quickly build a form to create, read or update a Salesforce record. Creating a form using this component is the easiest way of doing it as there is no customization required to build the form manually.

lightning-record-form is less customizable, in order to customize the layout as per your choice and conditionally render fields you can use lightning-record-view-form (to view data) and lightning-record-edit-form (to edit data).

lightning-record-form provides the below feature, which makes implementing it an ease.

a. Switch between view and edit modes with the click of the pen icon.

b. Save and Cancel button is rendered automatically when in the edit mode.

c. It utilizes the default field layout of the Object which supports multiple columns layout.

d. Load all the fields in the Object’s compact or full layout or specify the fields that you want to display.

2. 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 as per your choice.

3. 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

A detailed explanation of all the base components can be found here.

Using wire adapters provided by Lightning Data Services

To perform CRUD operation in the Lightning Web Component(LWC) use the below wire adapters and functions:

1. getRecord: Use the getRecord wire adapter to get a record’s data. Just pass the recordId and the array of fields which you want to get. To extract a specific field value use the getFieldValue function. Both getRecord and getFieldValue are part of User Interface API resource of the lightning framework.

2. createRecord: Use the createRecord wire adapter to get a create a record in Salesforce. All you need to do is pass the Salesforce Object reference for which you want to create the record and record data in JSON format with correct API names of the field.

3. updateRecord: Use the updateRecord wire adapter to update the record in Salesforce. Here you need to construct a JSON object containing all the field values which you want to update along with the id field, this is the id of the record which you want to update. Pass the JSON object to updateRecord wire adapter and using promises we handle the success and error response.

4. deleteRecord: As the name suggests deleteRecord is used to delete a record in Salesforce. Just pass the Id of the record you want to delete and BOOM the record gets deleted from the Salesforce database.

Using Apex

If you are not able to use the base components provided by the platform and you are not able to utilize wire adapters as well, use Apex.

Using Apex in LWC should be the last option if none of the base components work or even the wire adapters fails in your use case and you need more control & customization.

Note: You can expose your apex method with AuraEnabled annotation, which can then be referenced in the LWC using import <referencevariablename> from @salesforce/apex/<classname>.<methodname>

So, What is the Best Way to get Salesforce Data in LWC out of the ones mentioned above?

To answer this question we created the below cheat sheet to highlight the complexities and customization each of the above-discussed options provides, ascendingly sorted based on effort & complexity.

The below Effort vs Customization pyramid chart along with the Cheat Sheet(above) can easily help you pick the right choice for your use case.

Before working on any LWC Project we should do the Effort to Customization comparison for each possible option and use the one which best suits us.

Make sure to start with the base components first and move on to wire adapters and at the last go with the Apex route.