0

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 ### ()

  • Please include your code as text, not images. Also, you can format it using the {} button in your editor, or hitting CTRL+K. – Adrian Larson Jan 15 at 18:50
2

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

  • I tried by making same ID for both input field and use your code , but it is giving Parsing error: Unexpected token i – lightningman Jan 15 at 19:46
  • oppsmy bad.. I edited code – Pranay Jaiswal Jan 15 at 19:50
  • Thanks. I am able to get the values but how can I send these values to apex controller this method updateCustomerRecordList(List<Customer__c> cusList) where I am not able to set the updated value in the attribute and send to the controller as list of objects. How will I be able to do this. Thanks in advance – lightningman Jan 15 at 20:02
  • Wht do you wanna do? just update Customer__c record rights? You can do that without apex – Pranay Jaiswal Jan 15 at 20:04
  • I don't know how it will be possible because I am calling this component from custom button where I refer this lightning component inside the vf page. – lightningman Jan 15 at 20:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.