[SalesForce] salesforce lightning recordEditform to update the list

I am new to salesforce lightning. There are Two objects. Lead and customer. lead is lookup from customer object.

I created a custom button on lead object, the button will call a lighting component as modal which contains inside the vf page. 

<apex:page showHeader="true" tabStyle="Lead" lightningStylesheets="true" standardController="lead">
<!--    <apex:slds/> -->
<apex:includeLightning />
<div id="lightning"/>
<apex:includeScript value="//code.jquery.com/jquery-2.0.3.min.js"/>
<script type="text/javascript">    
var parentId = "{!$CurrentPage.parameters.id}";
console.log('hhhh'+parentId);
$Lightning.use("c:customformUpdateApp", function() {
    $Lightning.createComponent("c:customformUpdate",
                               {"parentId" : parentId },
                               "lightning",
                               function(component) {           
                               });
});

</script>

<!--"parentId":ParentId-->

In the pop-up window customer object related to lead record will show up. Please see Image 1.

enter image description here

I used a aura: iteration and inside that,
I used lightning:recordEditForm with recordId and objectApiName. Inside lightning:recordEditForm I used lightning:inputField. please see image 2. 

<aura:attribute name="customerRecordUpdateList" type="Customer__c[]"/>
<aura:iteration items="{!v.customerRecordUpdateList}" var="cus_var">
                    <div aura:id="recordEditForm" class="hideForm">
                        <lightning:recordEditForm aura:id="editForm" recordId="{!cus_var.Id}" objectApiName="Customer__c">
                            <lightning:layoutItem padding="around-small">  
                                <div class="slds-grid slds-gutters">
                                    <!-- First column FIRST page-->
                                    <div class="slds-col slds-size_1-of-2">
                                        <span>
                                            <label for="AddressState">Checkbox 1</label>
                                            <lightning:inputField fieldName="checkbox_1__c" variant="label-hidden" aura:id="Check1FlagEdit"/>    
                                            <label for="AddressState">Checkbox 2</label>
                                            <lightning:inputField fieldName="checkbox_2__c" variant="label-hidden" aura:id="Check2FlagEdit"/>       
                                        </span>
                                    </div>
                                    <!-- First column FIRST page END-->
                                </div>
                            </lightning:layoutItem>
                        </lightning:recordEditForm>
                    </div>
                </aura:iteration>
<lightning:button label="save" name="save" variant="brand" onclick="{!c.onclicksvae}"/>

now it shows the current records with two checkboxes checked. Once user edits the checkbox and hit Save button it will call {!onclicksvae} method in JS controller and it will call apex controller method "updateCustomerRecordList" to update the records. Problem is that new edited field I cannot capture and I am not able to set in object[] attribute. which will pass as params to "cusList". 

onclicksvae:function(component, event, helper){
    console.log('called');
    var checkboxOne = component.find("Check1FlagEdit").get("v.value");;
     var checkboxTwo = component.find("Check2FlagEdit").get("v.value");
    alert('############'+checkboxOne+''+checkboxTwo);
    var fieldArray = [];
    fieldArray.push(checkboxOne,checkboxTwo);
    var convertJSONcheck = JSON.stringify(fieldArray);
    component.set("v.customerRecordUpdateList", convertJSONcheck);
    //component.set("v.customerRecordUpdateList.checkbox_1__c", checkboxOne);
    //component.set("v.customerRecordUpdateList.checkbox_2__c", checkboxTwo);
    var checkNewsettingvaluesforUpdate = component.get("v.customerRecordUpdateList");
    console.log('updating value to pass in the controller '+checkNewsettingvaluesforUpdate); 
    var action = component.get("c.updateCustomerRecordList");
    //Setting the Apex Parameter
    action.setParams({
        cusList : checkNewsettingvaluesforUpdate
    });
    // execute server side action
    $A.enqueueAction(action);                 
},

Apex code:

 @AuraEnabled
public static map<string,string> updateCustomerRecordList(List<Customer__c> cusList)
{
    map<string,string> resultmap = new map<string,string>();
    system.debug('checking the list to update ### '+cusList);
    try{
        update cusList;
        resultmap.put('status', 'Success');
        resultmap.put('message', 'Record saved successfully');
    }
    catch(Exception ex)
    {
        resultmap.put('status', 'error');
        resultmap.put('message', ex.getMessage());
        system.debug('Error Occured ::: '+ex.getMessage()+ ' and line number ' +ex.getLineNumber());
    }
    return resultmap;
}

after I see the log, I see it is coming null 14:12:59:002 USER_DEBUG [24]|DEBUG|checking the list to update ### ()

Best Answer

As I can see, your lightning:inputField is inside the aura:iteration, that means there can be multiple inputFields with the same id , in your case Check1FlagEdit and Check2FlagEdit

So, if there are multiple elements with the same id, component.find("Check1FlagEdit") will return an array instead of individual component. And as array doesn't have get("v.value"); it will return null.

So to answer, you have to bulkify your javascript code. 

onclicksvae:function(component, event, helper){
    console.log('called');
    var checkboxOne = component.find("Check1FlagEdit");
    for(var i = 0 ; i < checkboxOne.length ; i++){
        console.log(checkboxOne[i].get("v.value"));
    }
}

UPDATE: From Comments, it looks like you just wanna update records. You can do that without apex

lightning:recordEditForm has global submit() method. Which automatically upserts the record. From your JS you just have to call this method in iteration.

onclicksvae:function(component, event, helper){

        var editedRecordList = component.find("editForm");
        for(var i = 0 ; i < editedRecordList.length ; i++){
            editedRecordList.submit(); // This will automatically update records in the database
        }
    }

Src: https://developer.salesforce.com/docs/component-library/bundle/lightning:recordEditForm/specification

Related Topic