0

I have a lightning component where in I have a few text fields and 2 picklist fields, controlling and dependent. The problem is whenever I try to add a new row dynamically, the new row will take the same values as row above it. I am not able to set the new row's options to blank. I have referred this on to initiate the picklist values with new options but that won't work as I am adding it in DoInIt. Adding new row does not all doinit, is my understanding right?

screenshot of the issue.

the component code,

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="Nigoemailcommunication" >
<aura:attribute name="recordId" type="String" />

 <!-- PAGE HEADER -->
<lightning:layout class="slds-page-header slds-page-header--object-home">
    <lightning:layoutItem>
        <lightning:icon iconName="standard:scan_card" alternativeText="primaryinfo"/>
    </lightning:layoutItem>
    <lightning:layoutItem padding="horizontal-small">
        <div class="page-section page-header">
            <h1 class="slds-text-heading--label">NIGO Email Communication</h1>
            <h2 class="slds-text-heading--medium">Primary Information</h2>
        </div>
    </lightning:layoutItem>
</lightning:layout>



<aura:attribute name="newCar" type="Childcontact__c" default="{ 'sobjectType': 'Childcontact__c','primaryinformation__c': '','Status__c': '','rejected_type__c': '','deadline__c':'','Rejected_reason__c': ''}"/>
<aura:attribute name="newCarMap" type ="Map" ></aura:attribute>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div class="slds-m-around--xx-large">
<div class="slds-float_left slds-p-bottom_small">
    Add Row 
        <lightning:buttonIcon iconName="utility:add"  size="large" variant="bare" alternativeText="Add" onclick="{!c.handleAddcarClick}"/>

</div>
<div class="container-fluid">        
    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
        <tbody>      
                <lightning:recordEditForm aura:id="CarCreateForm" objectApiName="Childcontact__c" >
                    <aura:iteration items="{!v.newCarMap}" var="acc" indexVar="index">
                <tr>
                    <td> 
                        {!index + 1}
                    </td>
                    <td>
                        <lightning:inputField fieldName="status"></lightning:inputField>
                    </td>
                    <td>
                        <lightning:inputField fieldName="Rejected Type" value="{!acc.rejected_type__c}"></lightning:inputField>
                    </td>
                    <td>
                        <lightning:inputField  fieldName="Rejected Reason" value="{!acc.rejected_reason__c}"></lightning:inputField>
                    </td>
                       <!--<c:LightningDependentPicklistCmp/>-->
                    <td style="padding-top: 27px;padding-left: 48px;">
                        <a onclick="{!c.removeRow}" data-record="{!index}">
                            <lightning:icon iconName="utility:delete" size="small" alternativeText="Delete"/>
                            <span class="slds-assistive-text">Delete</span>
                        </a>
                    </td>
                </tr>
                        </aura:iteration>
               </lightning:recordEditForm>

        </tbody>
    </table>

</div>
    </div>

</aura:component>

the controller is here, I have commented the code in the doInIt method to check if parent field is an array or not. if it's an array populate a different field or just one field.


HELPER :

({
addcar : function(component) {
    var newCarobjmap = component.get("v.newCarMap");
     var carobj = component.get("v.newCar");
    newCarobjmap.push(carobj);
    component.set("v.newCarMap",newCarobjmap) ;
    if(!$A.util.isEmpty(newCarobjmap)){ 
        newCarobjmap.push(carobj);
        console.log('33 --'+newCarobjmap);
        component.set("v.newCarMap",newCarobjmap) ;
    }else {    
        console.log('36 --'+carobj);
        component.set("v.newCarMap",[].concat(carobj)) ;
    }
}

})

CONTROLLER ::

({
doInit : function(component, event, helper) {
     helper.addcar(component);
},
handleAddcarClick : function(component,event,helper){
    helper.addcar(component);

}

ERROR : This page has an error. You might just need to refresh it. Action failed: c:NIGOEmailComp$controller$doInit [Cannot read property 'push' of null] Failing descriptor: {c:NIGOEmailComp$controller$doInit}

Was able to resolve the error, screenshot.. blank rows.

  • How is your helper.addAccountRecord() written? – Jayant Das May 20 at 16:23
  • @JayantDasOh yes, otherwise the row adding won't work right? Sorry, I forgot to add that. Just added the helper code now. – apple123 May 20 at 16:24
  • i also faced similar issue, i think i achieved by using lightning:recordForm instead getting picklist values from apex controller. i 'll try to create solution for your use case with your code – sdandamud1 May 20 at 16:47
  • @sdandamud1That would be great help, I also want to see if I can avoid this complex implementation of dependent picklist values. – apple123 May 20 at 16:48
1

i tried with Account Object, lightning:recordeditform gives all picklistfields and dependent mechanism also, please try below solution.

cmp

<aura:component controller="SeTesting" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name="newCar" type="Account" default="{ 'sobjectType': 'Account','Name': '','Type': '','Industry': '','Rating': ''}"/>
<aura:attribute name="newCarMap" type ="Map" ></aura:attribute>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div class="slds-m-around--xx-large">
<div class="slds-float_left slds-p-bottom_small">
    <h1 class="slds-page-header__title">Add Row 
        <lightning:buttonIcon iconName="utility:add"  size="large" variant="bare" alternativeText="Add" onclick="{!c.handleAddcarClick}"/>
    </h1>
</div>
<div class="container-fluid">        
    <table class="slds-table slds-table_bordered slds-table_cell-buffer">
        <tbody>      
            <aura:iteration items="{!v.newCarMap}" var="acc" indexVar="index">
                <lightning:recordEditForm aura:id="CarCreateForm" objectApiName="Account" >
                <tr>
                    <td> 
                        {!index + 1}
                    </td>
                    <td>
                        <lightning:inputField fieldName="Type"></lightning:inputField>
                    </td>
                    <td>
                        <lightning:inputField fieldName="Industry"></lightning:inputField>
                    </td>
                    <td>
                        <lightning:inputField  fieldName="Rating"></lightning:inputField>
                    </td>
                       <!--<c:LightningDependentPicklistCmp/>-->
                    <td style="padding-top: 27px;padding-left: 48px;">
                        <a onclick="{!c.removeRow}" data-record="{!index}">
                            <lightning:icon iconName="utility:delete" size="small" alternativeText="Delete"/>
                            <span class="slds-assistive-text">Delete</span>
                        </a>
                    </td>
                </tr>
               </lightning:recordEditForm>
            </aura:iteration>
        </tbody>
    </table>

</div>

controller.js

({
doInit :  function(component, event,helper) {    
        helper.addcar(component);

},
handleAddcarClick : function(component,event,helper){
        helper.addcar(component);
  }
})

helper.js

({
addcar : function(component) {
    var newCarobjmap = component.get("v.newCarMap");
     var carobj = component.get("v.newCar");
    if(!$A.util.isEmpty(newCarobjmap)){ 
        newCarobjmap.push(carobj);
        component.set("v.newCarMap",newCarobjmap) ;
    }else {    

        component.set("v.newCarMap",[].concat(carobj)) ;
    }
}
})

enter image description here

  • I tried removing the value attributes from the <lightning:inputfield> that still did not solve the issue... – apple123 May 21 at 15:22
  • can you add your server side apex controller code too? – apple123 May 21 at 15:26
  • what happening any error? or row added with out any dropdowns? fieldName in lightning:recordeditform you should give field api Names , i observed spaces in above your codeat field name attributes. it's wrong – sdandamud1 May 21 at 15:27
  • Hey... that solved the issue. I did not know it took API names, I updated with API names and it worked. Thanks much for taking time. There is one problem however, in the additional rows, the picklist values are blank. like in the 2nd row and so on.... – apple123 May 21 at 15:31
  • @apple123, it's very hard give solution in comments, if this question solved plzz upvote for helping others and ask another new Questions with current problem other wise Mod's 'll clean all these comments – sdandamud1 May 21 at 15:35
0

Each row refers to the same parent/child values. In fact, you've made this mistake all through your code. Each row should refer to an element in the list.

<aura:iteration items="{!v.contactList}" var="acc" indexVar="index">
...
    <lightning:input name="contactName" type="text" required="true" 
      maxlength="50" label="Primary Information" 
      value="{!acc.primaryinformation__c}" />
...
    <lightning:select name="parentField" aura:id="parentField"
      value="{!acc.ParentValue__c}" ... />
...

You'll need to combine the data with the picklist options in to a "wrapper", then remove/update the objects before sending them to the server.

  • I will update that but here I am populating the picklist values from the controller and using a list to show options. Can I still use API name of the field for those controlling and dependent field? – apple123 May 20 at 18:20
  • @apple123 I'm not sure I understand the question? As I said, each row that needs to be unique needs to have its own unique area to store data. This means using the var value provider and not "v". – sfdcfox May 20 at 19:01
  • I tried that too, I also tried @sdandmud1 's answer... I am getting blank rows so I tried removing the {!acc.primaryinformation__c} and adding it, same results. – apple123 May 20 at 19:51
  • @apple123 JavaScript is cAsE-SeNsITiVe. Did you check the field names to make sure you've matched them exactly as they are in the system? – sfdcfox May 20 at 19:56

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.