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
Niharika GoudNiharika Goud 

How to insert multiple records using wrapper class in Lightning Component at a time

Hai.,,

I am New to Lightning..,

plz help me anyone
Akshay_DhimanAkshay_Dhiman

Hi Niharika,

Please try the below code:

//Apex controller 
public class AllAccountWithOppAndCont_ApexClass {
    
    @AuraEnabled
    public static List<sobjectwrapperclass> myAction() 
    {
        List<sobjectwrapperclass> sobjectwrapper = new List<sobjectwrapperclass>();
        List<Account> objList = new List<Account>();
        objList = [SELECT Id,Name, (SELECT Name FROM Contacts),(SELECT Name FROM Opportunities) FROM Account LIMIT 20];
        for(Account obj:objList)
        {
            sobjectwrapperclass wrap = new sobjectwrapperclass();
            wrap.accName=obj.Name;
            wrap.accId=obj.Id;
            wrap.NumberOfContact=obj.contacts.size();
            wrap.conList=obj.Contacts;
            wrap.oppList=obj.Opportunities;
            sobjectwrapper.add(wrap);
            
        }
        if(sobjectwrapper.size()>0){
            return sobjectwrapper;
        }else
            return null;
        
        
    }
    
    public class sobjectwrapperclass{
        @AuraEnabled
        public String accName{get;set;}
        @AuraEnabled
        public String accId{get;set;}
        @AuraEnabled
        public Integer NumberOfContact{get;set;}
        @AuraEnabled
        public List<Contact> conList{get;set;}
        @AuraEnabled
        public List<Opportunity> oppList{get;set;}
    }
    
    
}

//Lightning component
 //  Component Name---> SpeakerForm.cmp

<aura:component access="global" controller="AllAccountWithOppAndCont_ApexClass">
    <aura:handler name="init" value="{!this}" action="{!c.action}"/>
    <aura:attribute name="accounts" type="sObject[]"/>
    <aura:attribute name="isSelectAll" type="boolean" default="false"/>
    <div>
        <!--Header-->
        <lightning:layout horizontalAlign="spread" multipleRows="true">
            <lightning:layoutItem flexibility="grow" >
                <h1 class="modal-header slds-modal__header"  align="center">Accounts Detail</h1>
            </lightning:layoutItem>
        </lightning:layout>
        <!--/Header-->
        
        <table class="slds-table slds-table_bordered slds-table_resizable-cols slds-table_fixed-layout" role="grid">
            <thead>
                <tr class="slds-text-title--caps">
                    <!--Header checkBox-->
                    <th>
                        <div class="slds-m-left_medium">
                            <!--header checkbox for select all-->
                            <ui:inputCheckbox aura:id="box3" change="{!c.selectAll}"/>
                            SELECT ALL
                        </div>
                    </th>
                    <!--/Header checkBox-->
                    <th aria-sort="none"  scope="col">Account Name</th>
                    <th aria-sort="none" scope="col">Account Id</th>
                    <th aria-sort="none" scope="col">No Of Contacts</th>
                    <th aria-sort="none" scope="col">Contacts</th>
                    <th aria-sort="none"  aria-label="Close Date" scope="col">Opportunities</th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.accounts}" var="acct">
                    <tr class="slds-text-title--caps">
                        <!--Body checkBox-->
                        <td>
                            <div class=" slds-m-left_x-small">
                                <ui:inputCheckbox text="{!acct.Id}" aura:id="boxPack" value="" change="{!c.checkboxSelect}"/>
                            </div>
                        </td>  
                        <!--/Body checkBox-->
                        <td class="slds-truncate">{!acct.accName}</td>
                        <td class="slds-truncate">{!acct.accId}</td>
                        <td class="slds-truncate">{!acct.NumberOfContact}</td>
                        <td class="slds-truncate">
                            <ui:inputSelect class="slds-input">
                                <aura:iteration items="{!acct.conList}" var="cont">
                                    <ui:inputSelectOption text="{!cont.Name}" label="{!cont.Name}"/>
                                </aura:iteration>
                            </ui:inputSelect>
                        </td>
                        <td class="slds-truncate">
                            <ui:inputSelect class="slds-input">
                                <aura:iteration items="{!acct.oppList}" var="op">
                                    <ui:inputSelectOption text="{!op.Name}" label="{!op.Name}"/>
                                </aura:iteration>
                            </ui:inputSelect>
                        </td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
</aura:component>


AllAccountsWithOppAndCont_ComponentController.js==>

({ // eslint-disable-line
    action: function (c,e,h) {
        console.log('saveData');
        h.myAction_helper(c,e,h);
    },
    
    selectAll: function(c,e,h) {
  //get the header checkbox value  
  var selectedHeaderCheck = e.getSource().get("v.value");
  // get all checkbox on table with "boxPack" aura id (all iterate value have same Id)
  // return the List of all checkboxs element 
  var getAllId = c.find("boxPack");
  // If the local ID is unique[in single record case], find() returns the component. not array   
     if(! Array.isArray(getAllId)){
       if(selectedHeaderCheck == true){ 
          c.find("boxPack").set("v.value", true);
          c.set("v.selectedCount", 1);
       }else{
           c.find("boxPack").set("v.value", false);
           c.set("v.selectedCount", 0);
       }
     }else{
       // check if select all (header checkbox) is true then true all checkboxes on table in a for loop  
       // and set the all selected checkbox length in selectedCount attribute.
       // if value is false then make all checkboxes false in else part with play for loop 
       // and select count as 0 
        if (selectedHeaderCheck == true) {
        for (var i = 0; i < getAllId.length; i++) {
      c.find("boxPack")[i].set("v.value", true);
      c.set("v.selectedCount", getAllId.length);
        }
        } else {
          for (var i = 0; i < getAllId.length; i++) {
      c.find("boxPack")[i].set("v.value", false);
       c.set("v.selectedCount", 0);
       }
       } 
     }  
 
 },
}) // eslint-disable-line

AllAccountsWithOppAndCont_ComponentHelper.js==>

({
    myAction_helper : function(c,e,h) {
        console.log('Akash------');
        var action = c.get("c.myAction");
        action.setCallback(this, function (response) {
            if(response.getState() === 'SUCCESS') {
                var storedResponse = response.getReturnValue();
                console.log('storedResponse:');
                console.log(storedResponse);
                c.set("v.accounts",storedResponse);
                
            } else {
                console.log('ERROR');
                console.log(response.getError());
            }
        });
        $A.enqueueAction(action); 
    }
})
// Calling Lightning component with the help of Lightning Application
<aura:application extends="force:slds">
    <c:SpeakerForm/>//Component Name
</aura:application>

If you found this answer helpful then please mark it as best answer so it can help others.   

     Thanks 
     Akshay