LWC Code Sample for Database Insert in Salesforce

Introduction:

In this blog post, we will explore how to use Lightning Web Components (LWC) in Salesforce to perform a database insert operation. We'll walk through a step-by-step code sample that demonstrates how to create a form in LWC, capture user input, and insert the data into a Salesforce database using Apex.

Prerequisites:

Before proceeding with the code sample, make sure you have the following:

1. A Salesforce developer account
2. Basic knowledge of Salesforce development, including Apex and LWC
3. Salesforce CLI installed and configured

Step 1: Set Up the Project

To begin, create a new LWC project using the Salesforce CLI. Open your terminal or command prompt and run the following command:

sfdx force:project:create -n LWCDatabaseInsert

Navigate to the project directory:

cd LWCDatabaseInsert

Step 2: Create an Apex Class

Next, let's create an Apex class that will handle the database insert operation. Create a new file named "DatabaseInsertController.cls" in the "force-app/main/default/classes" directory. Add the following code to the file:

public with sharing class DatabaseInsertController {

    @AuraEnabled

    public static void insertRecord(String name, String email) {

        // Create a new record

        Account account = new Account();

        account.Name = name;

        account.Email__c = email;

        

        // Insert the record into the database

        insert account;

    }

}

Step 3: Create the LWC Component

Now, let's create the Lightning Web Component that will contain the form and handle user input. Create a new file named "databaseInsertForm" in the "force-app/main/default/lwc" directory. Add the following code to the file:

<template>

    <lightning-card title="Database Insert Form">

        <div class="slds-p-horizontal_medium slds-p-vertical_small">

            <lightning-input label="Name" value={name} onchange={handleNameChange}></lightning-input>

            <lightning-input label="Email" value={email} onchange={handleEmailChange}></lightning-input>

            <lightning-button label="Submit" onclick={handleSubmit}></lightning-button>

        </div>

    </lightning-card>

</template>

Step 4: Add JavaScript Logic

Create a new file named "databaseInsertForm" in the same directory. Add the following code to the file:

import { LightningElement, track } from 'lwc';

import insertRecord from '@salesforce/apex/DatabaseInsertController.insertRecord';

export default class DatabaseInsertForm extends LightningElement {

    @track name = '';

    @track email = '';

    

    handleNameChange(event) {

        this.name = event.target.value;

    }

    

    handleEmailChange(event) {

        this.email = event.target.value;

    }

    

    handleSubmit() {

        insertRecord({ name: this.name, email: this.email })

            .then(() => {

                // Success message or any additional logic

                console.log('Record inserted successfully.');

            })

            .catch((error) => {

                // Error handling

                console.error(error);

            });

    }

}

Step 5: Deploy and Test

Deploy the project to your Salesforce org using the following command:

sfdx force:source:deploy -p force-app/main/default

Once the deployment is successful, you can add the LWC component to a Lightning page or app using the Lightning App Builder.

Conclusion:

In this blog post, we learned how to create a Lightning Web Component in Salesforce and perform a database insert operation using Apex. By following the provided code sample and steps, you should now have a working LWC form that allows users to enter data and inserts that data into a Salesforce database. Feel free to modify the code and explore additional functionalities to enhance your LWC component further. 

Happy coding!