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

1 Answer 1

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);
    });
}
0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .