0

I have a component which will display a list of records in the table format, and here I have a pick-list input field named Distance . Now on entering value in distance field and saving the record, record gets saved but the distance value is not getting populated in the record. If there is only one record, on entering distance value it will get saved and be populated. But when it handles more than one record, since aura:id inside aura:iteration is static , it throws an error component.get() is not a function.Since aura:id does not support dynamic id’s, I couldn’t get this done.

 Component:

<aura:attribute name="diss" type="String"/>
<aura:attribute name="distanceval" type="String"/>//This value is fetched from Server side Controller.

<aura:if isTrue="{!v.LocationFound}">   
                <aura:iteration items="{!v.Location}" var="location" >
                    <tr> 
                        <th>
                            <label class="slds-checkbox">
                                <ui:inputCheckbox aura:id="checkLocation" value="" text="{!location.Id}"/>
                                <span class="slds-checkbox--faux" />
                                <span class="slds-form-element__label"></span>
                            </label>
                        </th>
                        <th scope="row">
                            <div class="slds-truncate" title="Location Name">{!location.Name}</div>
                        </th>

    <div class="slds-truncate" title="Distance" >

         <lightning:select name="selectItem"  label="Distance to TrainingLocation" value="" aura:id="dis" >
         <option value=" " > --Select-- </option>
          <aura:iteration items="{!v.distancevalue}"  var="dist">
              <option value="{!dist.value}"> {!dist.label} </option>
            </aura:iteration>
            </lightning:select>
           </div>

    Helper.js:

    var distanceval=component.find('dis').get('v.value');
            console.log('the distance values is>>>>>'+distanceval);
             component.set("v.diss",distanceval);
            console.log('value is>>>>>'+component.get('v.diss'));
  • I have even tried using onchange event but it does not work fine. – jayasuriya janarthan May 28 at 12:38
  • May I know why aren't you using lightning:datatable for this requirement. It is easy to specify row level actions with base lightning:datatable component. – Ashish Sharma May 28 at 12:52
  • Yes. @Ashish sharma. Initially I tried with lightning:datatable ,but since I have a input field which is "editable=true" it automatically populates save and cancel button that does not seem to work in my case. Because I have a seperate save button for saving the record. – jayasuriya janarthan May 28 at 13:16
  • Yes, I think you cannot hide the save/cancel panel. I am not sure about any css hack if possible. – Ashish Sharma May 28 at 14:25
2

when you use component.find from Aura:iteration it gives array of components if that aura:iteration had more than one items, so you 'll to get list of distance values if aura:iteration had more than one item. you need to change the code to get list of distance values. try below code let me know if you get any issue.

helper.js

var lstdistanceval= [].concat(component.find("dis")).map(cmp => cmp.get("v.value"); // even it's working when you have single item in aura:iteration
        console.log('the distance values is>>>>>'+lstdistanceval); // here you 'll get list of distances you can tweek what ever you want
  • Thanks @sdandamud. This code works in fetching all the distance value I select in picklist field. When I set this value to an attribute , even then I'm getting it in console. But when I assign it in action.setParams ,it throws an error. – jayasuriya janarthan May 28 at 13:54
  • var lstdistanceval= [].concat(component.find('dis')).map(cmp => cmp.get('v.value')); console.log('diatnce value is displayed as>>>>>'+lstdistanceval); component.set("v.diss",lstdistanceval); console.log('value in diss is>>>>'+component.get('v.diss')); var action = component.get('c.createRecord'); action.setParams({ Name : component.get('v.name'), Distance : component.get('v.diss') }); – jayasuriya janarthan May 28 at 13:57
  • i seen mistake here aura"attribute "diss" is string type but you trying set the list type of 'lstdistanceval', that's why you get error. – sdandamud1 May 28 at 14:01
  • I just now changed it to list type, though it throws an error. – jayasuriya janarthan May 28 at 14:02
  • can you update your question with new Code and error so that i can replicate your issue and try to fix it – sdandamud1 May 28 at 14:03
1

You can use lightning:datatable for this requirement. You can avoid using aura:iteration over html table element & relying on aura:id to get selected values. Base lightning datatable component will do all the things without much code.

.cmp:

<lightning:datatable columns="{! v.mycolumns }" data="{! v.mydata }" keyField="id" onrowaction="{! c.handleRowAction }" />

.js:

({ 
    init: function (cmp, event, helper) { 
          var actions = [
              { label: 'Show details', name: 'show_details' },
              { label: 'Delete', name: 'delete' }
           ]; 
          cmp.set('v.mycolumns', [
               // Other column data here 
               { type: 'action', typeAttributes: { rowActions:       actions, menuAlignment: 'left' 
              } } 
         ]); 
    }, 
  handleRowAction: function (cmp, event, helper) { 
      var action = event.getParam('action'); 

     var row = event.getParam('row');
    switch (action.name) { 
       case 'show_details':
             alert('Showing Details: ' + JSON.stringify(row)); 
             break;
       case 'delete': 
           var rows = cmp.get('v.mydata'); 
           var rowIndex = rows.indexOf(row);                
           rows.splice(rowIndex, 1);
           cmp.set('v.mydata', rows); break;
    } 
})

Please refer Creating Static Row-Level Actions

section under documentation tab on this linklightning datatable

Using a base lightning component allows you to do most of the basic tasks without much coding. Salesforce has already provided most of the basic functionalities in base components that helps you to avoid coding each and every functionality by yourself. Its a good practice to use provided base components instead of html elements and replicating the functionalities which are already available. If you have something that's not available in base component, then you should go for complete implementation.

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.