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>
1
  • Do share the relevant JS code as well. Mar 24, 2018 at 15:52

1 Answer 1

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.

4
  • instead of getElementById and element.style.backgroundColor... and others do use the component.find and $A.util.addClass(); Mar 24, 2018 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, 2018 at 14:32
  • Nevermind, I figured this out. Below is the final edit.
    – user52915
    Mar 25, 2018 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, 2018 at 14:54

You must log in to answer this question.

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