1

Here I'm trying to display all accounts records in a popup in lightning, and I want to know how can I get the accounts values when I select a particular checkbox I want to get that values printed in Lighting controller console log?

Right now I can check the checkboxes but I can't able to get those selected checkboxes account values?

Please have look at the processButton: method in the controller to get an idea where I'm struck.

.CMP

<aura:component controller="AccountsController" implements="lightning:actionOverride,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >



     <aura:attribute name="accounts" type="Account[]"/>
     <aura:attribute name="accounts2" type="Account[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />


         <ui:button class="slds-align_absolute-center" label="Click Me To Popup!!!" press="{!c.openmodal}"  /> 
       <!-- this div gives a pop up of the page-->
          <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox" class="slds-modal slds-modal_large">
       <div class="slds-modal__container" style="width: 10%;">
           <div class="slds-modal__header">
               EDIT
    <aura:iteration items="{!v.accounts}" var="account" indexVar="accountKey"> 
    <tr id="{!'tr'+accountKey}">
        <th> {!'tr'+accountKey} </th>
        <th scope="col">
            <ui:inputCheckbox Text="{!account}" aura:id="accountSelected" />
        </th>
        <th scope="col">
            <ui:outputText aura:id="Name" value="{!account.Name}"/>
        </th>
        <th scope="col">
            <ui:outputText aura:id="street" value="{!account.BillingStreet}"/>
        </th>   
        <th scope="col">
            <ui:outputText aura:id="city" value="{!account.BillingCity}"/>
        </th>
        <th scope="col">
            <ui:outputText aura:id="state" value="{!account.BillingState}"/>
        </th>

    </tr>
</aura:iteration>
           </div>
<lightning:button variant="brand" label="Process" onclick="{!c.processButton}" />
                <div class="slds-modal__footer">
                    <ui:button label="close" press="{!c.closeModal}"  />
                </div>
            </div>  
              </div>

        <div class="slds-backdrop " aura:id="Modalbackdrop"></div>   
</aura:component>

Controller

({
    closeModal:function(component,event,helper){    
        var cmpTarget = component.find('Modalbox');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.removeClass(cmpBack,'slds-backdrop--open');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open'); 
        },
    openmodal:function(component,event,helper) {
        var cmpTarget = component.find('Modalbox');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.addClass(cmpTarget, 'slds-fade-in-open');
        $A.util.addClass(cmpBack, 'slds-backdrop--open'); 
    },
    Submitmodal:function(component,event,helper){
         var tes1=component.get("v.test1");
         var tes2=component.get("v.test2");
         console.log(tes1);
         console.log(tes2);

    },
    doInit: function(component, event, helper) {      
        var action = component.get('c.getAccounts');
        console.log(action);
        // 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) {
        debugger;
        console.log("this is logo");
        var le = component.find("accountSelected").length;
        console.log(le);
        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);
                console.log('tr'+i);
                element.style.backgroundColor='#800';
                element.style.color='white';
                element.style.textAlign='center';
                Console.log("here I wan to get selected accounts ");
                ****<!--  How can i get the accounts values selected ones  -->****

            } else {
                var element = document.getElementById('tr'+i);
                element.style.backgroundColor='#fff';
                element.style.color='black';
                element.style.textAlign='center';
            }
        }
    }

})

1 Answer 1

1

You can use below JS code to get selected checkboxes:

let selected = component.find("accountSelected").filter(comp=>comp.get("v.value"));
console.log("selected => ", selected, selected.length);

However I would recommend to use lightning:input as below:

<lightning:input type="checkbox" aura:id="accountSelected" />

Here you need to use checked property for lightning:input

let selected = component.find("accountSelected").filter(comp=>comp.get("v.checked"));
console.log("selected => ", selected, selected.length);

Adding based on comment You need to add name attribute which will have dynamic account id

<ui:inputCheckbox name="{!account.Id}" aura:id="accountSelected" />

Now in JS:

let selected = component.find("accountSelected").filter(comp=>comp.get("v.value"));
    let selectedAccIds = selected.map(comp=>comp.get("v.name"));
    console.log("selected => ", selected, selected.length, selectedAccIds);

let selectedAccounts = [];
    component.get("v.accounts").forEach(function(acc){
        if (selectedAccIds.includes(acc.Id)) selectedAccounts.push(acc);
    });
    component.set("v.selectedAccounts", selectedAccounts);

best practice: Component framework is designed in such a way that you need separate component for each functionality.

Here you need separate component inside iteration:

<aura:iteration items="{!v.accounts}" var="account" indexVar="accountKey">
    <c:accountRow account="{!v.account}" />
</aura:iteration>

Inside c:accountRow, you have put full <tr>. Then when checkbox is checked, send the account record in event which can then be handled by parent and push in selected accounts.

5
  • Hey That's not the question I'm Already Getting that selected checkboxs info, I want to know how I can get the selected checkbox accounts values
    – VINOD
    Jul 22, 2019 at 7:01
  • Can I have sample code please, I'm not able to understand
    – VINOD
    Jul 22, 2019 at 9:31
  • use <ui:inputCheckbox name="{!account.Id}" aura:id="accountSelected" /> in your code and use above mentioned javascript. You should be querying account Id also in Apex. Pls let me know if its still not clear and where exactly its not clear. Ignore best practice for now - will create a blog post and share with you for this best practice Jul 22, 2019 at 9:42
  • I'm not clear how to drag that selected accounts values into JS controller?
    – VINOD
    Jul 22, 2019 at 9:54
  • editing the answer Jul 22, 2019 at 9:59

You must log in to answer this question.

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