0

I am creating a table of Contacts and trying to Delete Or Copy bulk of contacts at a time. I am seeing an issue with component.find().length is giving me undefined.Whenever I select a header checkbox/contactCheckbox a panel will be displayed and I am seeing some discrepancy because of the component.find().

component.find('contactCheckbox').length is giving me undefined if it contains only one contact. Let me know what can I do? Appreciate your help in advance!!

**//COMPONENT//**
<aura:attribute name="selectedContactList" type="List"  description=" List to store Contactid's for selected checkboxes  "/>

         <div class="slds-col slds-col--rule-bottom slds-scrollable slds-m-left--medium slds-m-right--medium contact-table">
              <table role="grid" class="slds-text-align--center slds-table slds-table--cell-buffer slds-table--bordered slds-no-row-hover contactTable">
                <thead>
                  <tr class="header-text">
                    <th scope="col" class="slds-text-align--center " style="width:50px;">
                        <div class="slds-float--left">
                            <div class="slds-form-element">
                                <div class="slds-form-element__control"> 
                                    <label class="slds-checkbox">
                                        <ui:inputCheckbox aura:id="headerCheckbox" name="headerCheckbox" class="slds-align--absolute-center" value="false" change="{!c.selectAllContacts}"/>
                                        <span class="slds-checkbox--faux"></span>
                                        <span class="slds-form-element__label"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </th>
         <aura:iteration items="{!v.contactList}" var="item" indexVar="index">
      <td scope="row" class="slds-text-align--center" style="width:50px;">
                      <div class="slds-float--left">
                          <div class="slds-form-element">
                              <div class="slds-form-element__control">
                                  <aura:if isTrue="{!!(item.contact__AddedBy__c == 'AE')}">
                                      <label class="slds-checkbox">
                                          <ui:inputCheckbox aura:id="contactCheckbox" text="{!contactLine.Id}" name="{!index}" class="slds-align--absolute-center" value="false" change="{!c.selectContactCheckbox}"/>
                                          <span class="slds-checkbox--faux"></span>
                                          <span class="slds-form-element__label"></span>
                                      </label>
                                  </aura:if>
                              </div>
                          </div>
                      </div>
                  </td>
        </tr>
      </aura:iteration>
     </tbody>
    </table>


**//CONTROLLER//**
 selectAllContacts: function(component, event, helper) {
    var isTopLevelCheckboxSelected = event.getSource().get('v.value');
    var getCheckboxId = component.find('contactCheckbox');
    var listOfSelectedContactCheckboxIds = [];
    if (isTopLevelCheckboxSelected === true) {
        for (var i = 0; i < getCheckboxId.length; i++) {
            getCheckboxId[i].set('v.value', true);
            listOfSelectedContactCheckboxIds.push(getCheckboxId[i].get('v.text'));
        }       
    } else {
        for (var i = 0; i < getCheckboxId.length; i++) {
            getCheckboxId[i].set('v.value', false);
        }
    }
    component.set('v.selectedContactList',listOfSelectedContactCheckboxIds);
  },

  selectContactCheckbox: function(component, event, helper) { 
    var isRowCheckboxSelected = event.getSource().get('v.value');
    var listOfSelectedContactCheckboxIds = [];
    var getCheckboxId = component.find('contactCheckbox');
    for (var i = 0; i < getCheckboxId.length; i++) {
        if (getCheckboxId[i].get('v.value') === true) {
            listOfSelectedContactCheckboxIds.push(getCheckboxId[i].get('v.text'));
        }
    }
    if (isRowCheckboxSelected === false) {
        component.find('headerCheckbox').set('v.value', false);
    }
    component.set('v.selectedContactList',listOfSelectedContactCheckboxIds);
  }

Below is the console.log(getCheckboxId) enter image description here

4

I ran into this same issue. The deal is component.find will return the object if there only one. My workaround was to check if the result was an array.

// Update the UI components.
// If there is only a single checkbox it will not be an array.
if (!Array.isArray(checkboxes)) {
    checkboxes.set('v.value', value);
} else {
    checkboxes.forEach(function(cb) {
        cb.set('v.value', value);
    });
}
| improve this answer | |

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.