0

I have a simple lightning component which has few fields using from Account object like Name,Phone,Website etc...and with checkbox.

shown here: enter image description here

What I want to do is that when the user check the Checkbox I want to add to a list and display the id. Here is what I have done so far, I'm getting the correct Id when I click on the checkbox but its not adding to the list ({!v.ids}).

//defining the aura attribute:

<aura:attribute name="ids" type="List" />
Selected Ids: {!v.ids}

//handler:

<aura:handler name="accountSelectedtEvent" event="c:accountSelectedtEvent" action="{!c.handleCheckAccounts}"></aura:handler>

//controller:

handleCheckAccounts: function(component, event, helper){

        var isSelected = event.getParam("selected");  
        var my_ids = [];
        var mySelectedId;

        if (isSelected){
            mySelectedId = event.getParam("id");  
            my_ids.push(mySelectedId);
        }
        component.set("v.ids", my_ids);
        console.log('-->ids---' + my_ids);            
    }

//component event:

<aura:event type="COMPONENT" description="Event template" >
    <aura:attribute name="selected" type="Boolean"></aura:attribute>
    <aura:attribute name="id" type="String"></aura:attribute>
</aura:event>
0

So without having tested this solution, I would say you should be able to just push the value onto the current list that you have. What I did not see in your current controller was where you were using that List you specified in your attributes, only that you declared a new Array, and then added a single value and reset the selected Id from the current event to it. My suggestion would be to replace your new Array instance with the current List param, and push the newly checked instance to your Array. Then the value would be there when you call component.set( "v.ids", my_ids );. I do believe that you should consider also handling deselecting a value from your array too.

handleCheckAccounts: function(component, event, helper){

    var isSelected = event.getParam("selected");  
    var my_ids = component.get( "v.ids" ); // Get the current list from the controller
    var mySelectedId;

    if (isSelected){
        mySelectedId = event.getParam("id");  
        my_ids.push(mySelectedId); // add the index to this list
    }
    component.set("v.ids", my_ids); // display the change
    console.log('-->ids---' + my_ids);            
}
  • Thanks @ronnie, I'm aware that I need to add deselecting a value handling. Before that if I use attribute type="List" its not pushing the ids but if I use type="String" it adds the multiple ids to it and I'm wondering why is it not adding to the List though. here is how it's adding if I use the type="String" then it add the ids here is the console log: -->ids---["0011I000008oYThQAM","0011I000008oYTiQAM"] – Nick Kahn Sep 13 '18 at 16:44
0

This can just be a line of code, and the custom event isn't even necessary; just bind it to the click action of the checkbox you're using. The following is a semi-functional version (doesn't check for non-array find return value):

handleCheckAccounts: function(component) {
  component.set("v.ids", component.find("selectRecord").filter(row => row.get("v.value")));
}

Your specific code has a limitation that it doesn't remove ID values that are unchecked.

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.