Visualforce to LWC: Creating Records using lightning-record-form

Hello Ohana,

Welcome back to the Visualforce to LWC series. In this article I will be discussing how to add records to a Standard or Custom object in Lightning. But first let’s see how we used to do that in Visualforce.

This is an example of creating records in the Lead object using Visualforce:

Visualforce:

Apex:

Accessing Salesforce Data in Lightning

There are several ways to access data in lightning web components:

  • Record Form Base Components
  • Lightning Data Service
  • Apex

The one I’ll be using today is lightning-record-form which is a part of the Record Form Base components. Let’s look at the same example done with a Lightning Component.

HTML:

Line 4–5: By using lightning-record-form we can specify the layout needed to insert our record. We use the object-api-name to tell the component which Object do we need to perform the creation on. In this case it’s the Lead object.

record-id attribute is the ID of the record to be displayed.

mode attribute determines the user interaction allowed. There are 3 modes: edit, view and readonly, In this case we are on the edit mode which creates an editable form to add or update records .

onsuccess attribute specifies an action to be done when the Lead is inserted successfully. This action is done in the function called handleSuccess.

JS:

Line 2–5: Here we are Importing the fields that we need to be displayed on our component.

Line 8: Declaring a variable called recordId which will hold the ID of the record we will create.

Line 11: We create an array called fieldArr that will hold the fields we need to display and notice that we pass this array to the attribute called fields in the lightning-record-form.

Line 13–15: handleSuccess event handler captures the ID of the record inserted successfully in the variable we declared in Line 8 called recordId.

As you can see it’s pretty simple when it comes to lightning. We didn’t need to use Apex because lightning-record-form takes care of the server side, also notice that we didn’t need to add buttons because lightning-record-form provides Cancel and Save buttons automatically in edit forms. After Clicking Save you have the option to edit the record that you’ve just created by clicking on the pencil icon.

We can further manipulate lightning-record-form by changing the attributes. Let’s say we need to display all the fields in the lead object, instead of importing them one by one you can use this attribute layout-type=”Full” and remove the fieldArr since we don’t need it anymore. Let’s see this in action.

HTML:

JS:

To learn more about lightning-record-form component check the Component Documentation.

Happy Learning :)!

--

--

--

Salesforce Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

5 Practical Applications of ‘this’ in JavaScript

Fastify Server-Sent Events(SSE)

Learn GatsbyJS by creating a tourism site -18

Next.js framework

ReactJS Tutorial for Beginners -9

Interview Preparation — Basic JavaScript-1

Creating Blog site using Stackbit, GatsbyJS and DEV -4

10 String Methods that every JavaScript Developer definitely need to know

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Farah Sherif Ghanem

Farah Sherif Ghanem

Salesforce Developer

More from Medium

Salesforce and Twilio: A Powerful Combination

Developer Productivity : Working with Realistic Datasets in Salesforce

How is the Salesforce Ecosystem Transforming Businesses: Explained By Cloud Odyssey

ULTIMATE GUIDE TO A SALESFORCE IMPLEMENTATION