0

I am displaying a list of accounts and have a checkbox next to those accounts.

I would like to process the information from those accounts based on if the checkbox is selected.

Below is my component, I know how to grab the list in the controller but can't get the list of accounts tied to the true checkbox values.

                <aura:iteration items="{!v.accounts}" var="account">    
                    <tr>
                        <th scope="col">
                            <div class="slds-truncate">{!account.Name}</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate">{!account.BillingStreet}</div>
                        </th>   
                        <th scope="col">
                            <div class="slds-truncate">{!account.BillingCity}</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate">{!account.BillingState}</div>
                        </th>
                        <th scope="col">
                            <ui:inputCheckbox aura:id="accountSelected"/>
                        </th>
                    </tr>
                </aura:iteration>
  • Do share the relevant JS code as well. – itzmukeshy7 Mar 24 '18 at 15:52
0

Your Component HTML should look like:

<aura:component controller="AccountsController">
<aura:attribute name="accounts" type="Account[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:iteration items="{!v.accounts}" var="account" indexVar="accountKey">    
    <tr id="{!'tr'+accountKey}">
        <th scope="col">
            <div class="slds-truncate">{!account.Name}</div>
        </th>
        <th scope="col">
            <div class="slds-truncate">{!account.BillingStreet}</div>
        </th>   
        <th scope="col">
            <div class="slds-truncate">{!account.BillingCity}</div>
        </th>
        <th scope="col">
            <div class="slds-truncate">{!account.BillingState}</div>
        </th>
        <th scope="col">
            <ui:inputCheckbox aura:id="accountSelected" />
        </th>
    </tr>
</aura:iteration>
<lightning:button variant="brand" label="Process" onclick="{!c.processButton}" />

Your Component JS should look like:

({
    doInit: function(component, event, helper) {      
        var action = component.get('c.getAccounts');
        // Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
            component.set('v.accounts', actionResult.getReturnValue());
        });
        $A.enqueueAction(action);
    },
    processButton: function(component, event, helper) {
        var le = component.find("accountSelected").length;
        for( var i=0; i < component.find("accountSelected").length; i++) {
            if( component.find("accountSelected")[i].get("v.value") == true ){
                var element = document.getElementById('tr'+i);
                element.style.backgroundColor='#800';
                element.style.color='white';
                element.style.textAlign='center';
            } else {
                var element = document.getElementById('tr'+i);
                element.style.backgroundColor='#fff';
                element.style.color='black';
                element.style.textAlign='center';
            }
        }
    }
})

So when you click on the button, it will highlight the row that has the checkbox selected.

  • instead of getElementById and element.style.backgroundColor... and others do use the component.find and $A.util.addClass(); – itzmukeshy7 Mar 24 '18 at 17:44
  • Thanks, this does get me into the rows where the checkbox is selected to true. However, how do I access the account information within the js? I would like to get the 18 digit account id within the row that is selected. – user52915 Mar 25 '18 at 14:32
  • Nevermind, I figured this out. Below is the final edit. – user52915 Mar 25 '18 at 14:54
  • 1
    addAccount: function(component, event, helper){ var allAccounts = component.get("v.accounts"); for(var i = 0; i < allAccounts.length; i++){ if(component.find("accountSelected")[i].get("v.value") == true){ alert(allAccounts[i].Id); } } } – user52915 Mar 25 '18 at 14:54

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.