Add Multiple Rows button (Dynamic Contact Rows) Bulk Insert Contacts Related to Account using Database.insert() in LWC Salesforce

Add Multiple Rows button (Dynamic Contact Rows) Bulk Insert Contacts Related to Account using Database.insert() Single LWC (No child component) in LWC Salesforce

SCENARIO

User will:

👉 Download Free Ebook →

👉 Get Complementary →

Enter Account details
Click Add Contact Row (can add multiple contacts)
Fill contact details

Apex inserts Account + Bulk Contacts

Create Apex Class → AccountContactBulkController.cls

Step 1:- AccountContactBulkController.cls

AccountContactBulkController.cls [Apex Controller]

public WITH sharing class AccountContactBulkController {

```
 
```
```
    @AuraEnabled
```

    public static String accountWithAddMultiContacts(Account acc, List<Contact> contactList) {

```
 
```
```
        try {
```
```
            // Step 1: INSERT Account
```
```
            INSERT acc;
```
```
 
```

            // Step 2: Assign AccountId TO each Contact

            FOR(Contact c : contactList){

```
                c.AccountId = acc.Id;
```
```
            }
```
```
 
```

            // Step 3: Bulk INSERT Contacts

            DATABASE.SaveResult[] results = DATABASE.insert(contactList, FALSE);

```
 
```
```
            INTEGER successCount = 0;
```
```
            INTEGER failCount = 0;
```
```
 
```

            FOR(DATABASE.SaveResult sr : results){

```
                IF(sr.isSuccess()){
```
```
                    successCount++;
```
```
                } ELSE {
```
```
                    failCount++;
```
```
                }
```
```
            }
```
```
 
```

            RETURN 'Account Created: ' + acc.Name +

                   ' | Total Contacts: ' + contactList.size() +

                   ' | Success: ' + successCount +

                   ' | Failed: ' + failCount;

```
 
```
```
        } catch(Exception e){
```

            throw NEW AuraHandledException(e.getMessage());

```
        }
```
```
    }
```
```
}
```

Component Name: accountContactDynamic.html →

Step 2:- LWC HTML — Input Fields for Multiple Contacts Related to Account

accountContactDynamic.html [HTML Component]

```
<template>
```

    <lightning-card title="Create Account & Multiple Contacts">

```
 
```

        <div class="slds-m-around_medium">

                <div class="slds-grid slds-wrap">

                     <div class="slds-col slds-size_6-of-12">

                        <!-- ACCOUNT SECTION -->

                        <h2>Account Details</h2>

```
 
```

                        <lightning-INPUT label="Account Name" name="accName" onchange={handleAccountChange}></lightning-input>

                        <lightning-INPUT label="Phone" name="accPhone" onchange={handleAccountChange}></lightning-input>

                        <lightning-INPUT label="Description" name="accDesc" onchange={handleAccountChange}></lightning-input>

```
                    </div>   
```
```
                 </div>
```
```
                        <br/>
```

                        <h2>Contact List</h2>

```
 
```

                        <div class="slds-grid slds-wrap">

                        <!-- CONTACT SECTION -->

```
 
```

                        <template FOR:each={contactList} FOR:item="con" FOR:INDEX="index">

                            <div KEY={con.key} class="slds-box slds-m-bottom_small slds-col slds-size_6-of-12">

```
 
```

                                <lightning-INPUT label="First Name"

                                    data-INDEX={INDEX}

                                    name="FirstName"

                                    VALUE={con.FirstName}

                                    onchange={handleContactChange}>

                                </lightning-input>

```
 
```

                                <lightning-INPUT label="Last Name"

                                    data-INDEX={INDEX}

                                    name="LastName"

                                    VALUE={con.LastName}

                                    onchange={handleContactChange}>

                                </lightning-input>

```
 
```

                                <lightning-INPUT label="Email"

                                    TYPE="email"

                                    data-INDEX={INDEX}

                                    name="Email"

                                    VALUE={con.Email}

                                    onchange={handleContactChange}>

                                </lightning-input>

```
 
```
```
                            </div>
```
```
                        </template>
```
```
                     </div>   
```
```
 
```

                        <lightning-button

                            label="Add Contact Row"

                            onclick={addRow}

                            class="slds-m-top_small">

                        </lightning-button>

```
 
```
```
                        <br/><br/>
```
```
 
```

                        <lightning-button

                            label="Create Account &amp; Contacts"

                            variant="brand"

                            onclick={handleCreate}>

                        </lightning-button>

```
 
```
```
        </div>
```
```
 
```
```
    </lightning-card>
```
```
</template>
```

accountContactDynamic.js →

Step 3:- LWC JavaScript

accountContactDynamic.js [HTML Component]

import { LightningElement, track } FROM 'lwc';

import accountWithAddMultiContacts FROM '@salesforce/apex/AccountContactBulkController.accountWithAddMultiContacts';

import { ShowToastEvent } FROM 'lightning/platformShowToastEvent';

```
 
```

export DEFAULT class AccountContactDynamic extends LightningElement {

```
 
```
```
    @track accountData = {};
```
```
    @track contactList = [
```

        { KEY: 1, FirstName: '', LastName: '', Email: '' }

```
    ];
```
```
 
```
```
    keyIndex = 2;
```
```
 
```
```
    // Handle Account FIELDS
```
```
    handleAccountChange(event) {
```

        this.accountData[event.target.name] = event.target.value;

```
    }
```
```
 
```
```
    // ADD NEW Contact ROW
```
```
    addRow() {
```
```
        this.contactList = [
```
```
            ...this.contactList,
```

            { KEY: this.keyIndex++, FirstName: '', LastName: '', Email: '' }

```
        ];
```
```
    }
```
```
 
```
```
    // Handle Contact CHANGE
```
```
    handleContactChange(event) {
```

        const INDEX = event.target.dataset.index;

        const fieldName = event.target.name;

        const VALUE = event.target.value;

```
 
```

        this.contactList[INDEX][fieldName] = VALUE;

```
    }
```
```
 
```
```
    // CREATE Account + Contacts
```
```
    handleCreate() {
```
```
 
```
```
        let acc = {
```

            Name: this.accountData.accName,

            Phone: this.accountData.accPhone,

            Description: this.accountData.accDesc

```
        };
```
```
 
```

        // Remove KEY BEFORE sending TO Apex

        let contactsToInsert = this.contactList.map(con => {

```
            RETURN {
```

                FirstName: con.FirstName,

```
                LastName: con.LastName,
```
```
                Email: con.Email
```
```
            };
```
```
        });
```
```
 
```

        accountWithAddMultiContacts({ acc: acc, contactList: contactsToInsert })

```
            .then(RESULT => {
```

                this.showToast('Success', RESULT, 'success');

```
            })
```
```
            .catch(error => {
```

                this.showToast('Error', error.body.message, 'error');

```
            });
```
```
    }
```
```
 
```

    showToast(title, message, variant) {

```
        this.dispatchEvent(
```
```
            NEW ShowToastEvent({
```
```
                title,
```
```
                message,
```
```
                variant
```
```
            })
```
```
        );
```
```
    }
```
```
}
```

accountContactDynamic.js-meta.xml →

Step 4:- LWC accountContactDynamic.js-meta.xml

accountContactDynamic.js-meta.xml [meta.xml Component]

  <?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

```
    <apiVersion>61.0</apiVersion>
```
```
    <isExposed>true</isExposed>
```
```
    <targets>
```

        <target>lightning__HomePage</target>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

```
    </targets>
```
```
</LightningComponentBundle>
```

FAQ (Frequently Asked Questions)

How to add or remove rows dynamically in lwc?

We have three methods defined each for adding rows, removing rows and saving or creating records. addRow – This method adds an value using concat method to the array so that rows gets added. removeRow – This method removes the value using array filter method. As a result, the rows gets removed.

How do I insert more than 50,000 records in Salesforce?

you need a batch class for data more than 50000. The limit is for one transaction so if you have one query or 100 queries, total record retrieved should be less than 50000.

How to create a component dynamically in LWC?

To instantiate a component dynamically, use the managed element with the lwc:is directive in a component's HTML file. Here's an HTML template that uses . serves as a placeholder in the DOM that renders the specified dynamic component.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net