function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Shuhbam SinhaShuhbam Sinha 

How to create custom table for multiple records by using record edit form in lwc

Hello Everyone,
I have a requirement where I need to create a custom table with checkbox column and some fields. This table should show multiple rows where user can fill the details and there are lookup and picklist fields will also be there and when he clicks save button multiple records should be created at the same time. Let say if we have 5 rows and user checks only three checkboxes  against the rows and fills the details, only three recors should be created, I am trying to use Lightning-record edit form as it has lookup and picklist fileds . Any idea or sample code how I can achieve this. Please help me on the save,
Thanks in advance.
AshwiniAshwini (Salesforce Developers) 
Hi Shuhbam,

To create multiple records using a lightning-record-edit-form in a Lightning Web Component, you can follow below steps and reference links which can can you.
1.Create an LWC component with your custom table which includes checkbox columns and editable fields for each row.
2. Use the lightning-record-edit-form for each row's form and inside of each form, you can include the fields you want to edit, including lookup and picklist fields.
3.When the user clicks the save button, collect the data from the selected rows, prepare the records to be created and call Apex methods to perform the record creation.

Links to refer for sample code:
https://sfdcflight.blogspot.com/2020/05/salesforce-lwc-multi-record-creation.html 
https://github.com/flighttoSalesforce/Multi-Record-Creation 
https://www.youtube.com/watch?v=xbH_QX_Dyrk 
https://github.com/Lightning-Web-Components-Quicktips/Multi-Lightning-Record-Edit-Form  

If this information helps, please mark the answer as best. Thank you






 
Shuhbam SinhaShuhbam Sinha

Hi Ashwin,

Thank you so much for your reply but i have follow up question :- 

When the user clicks the save button, collect the data from the selected rows, prepare the records to be created and call Apex methods to perform the record creation.    -------  How can i collect the data of a complete row only for selected checkboxes and send it to apex to create records. Can you please help me on this.

AshwiniAshwini (Salesforce Developers) 
Hi Shubham,

In your LWC, you have a table where each row represents a record which user can edit. When the user clicks the save button, you have to identify which rows the user has selected ( by checking checkboxes in the rows) and  keep track of the selected rows in your JavaScript code.

For each selected row, you need to collect data entered by the user in the input fields and create a JavaScript data structure that represents the records to be created. Each record in this data structure should include field values which correspond to the user's input in the selected rows.

Once you have prepared the data structure with the records to be created,  make an asynchronous call to an Apex method (server-side code) using the @wire decorator or JavaScript's fetch API or lightning/uiRecordApi.

In your Apex method, you will receive the data  structure representing the records to be created, then iterate through this data structure and use it to create records.
AshwiniAshwini (Salesforce Developers) 
You can refer below sample code and make adjustments as per your requirement.

import { LightningElement, track, wire } from 'lwc';
import createRecords from '@salesforce/apex/ApexClass.createRecords';

export default class CustomTable extends LightningElement {
    @track tableData = []; // replace with actual data
    @track selectedRows = new Set(); //  to track selected rows

    //  handling checkbox changes
    handleCheckboxChange(event) {
        const rowId = event.target.dataset.id;
        if (event.target.checked) {
            this.selectedRows.add(rowId);
        } else {
            this.selectedRows.delete(rowId);
        }
    }

    // Function to prepare selected row data for Apex
    prepareSelectedData() {
        const selectedData = [];
        this.tableData.forEach((row) => {
            if (this.selectedRows.has(row.id)) {
                selectedData.push({
                    // Including field values you want to send to Apex
                    Id: row.id,
                    Field1__c: row.field1,
                    Field2__c: row.field2,
                });
            }
        });
        return selectedData;
    }

    // Function to create records when the user clicks the save button
    saveRecords() {
        const selectedData = this.prepareSelectedData();
        
        if (selectedData.length === 0) {
            // Handle the case where no rows are selected
            return;
        }

        // Call the Apex method to create records
        createRecords({ recordsToCreate: selectedData })
            .then((result) => {
                // Handle success message
            })
            .catch((error) => {
                // Handle errormessage
            });
    }
}

 
Shuhbam SinhaShuhbam Sinha
Thank you Ashwini . I will try this approach.