+ Start a Discussion
Ian QuahIan Quah 

(Marking which button was chosen within button group) within an aura iteration

Hey all,

Was wondering if someone could give me an idea on how to proceed. Say I have a list of users, and I want to present some admin with the ability to choose what type of profile to generate for each user.

Component Code: 
<aura:iteration var="user" items="{!v.Users}" indexVar="index">
    <div class="slds-button-group" role="group">
                    <lightning:button aura:id="CSV-Button" class="slds-button slds-button_neutral" label='CSV' onclick="{!c.selectedButton}" value="{!index}"/>
                    <lightning:button aura:id="PDF-Button" class="slds-button slds-button_neutral" label='PDF' onclick="{!c.selectedButton}" value="{!index}"/>
                    <lightning:button aura:id="XML-Button" class="slds-button slds-button_neutral" label='XML' onclick="{!c.selectedButton}" value="{!index}"/>
            </div>
</aura:iteration>        
Controller code: decided to implement the "tracking" of admin choices as a dictionary as they can make the user selections not in order.
selectedButton : function(component, event, helper) {   
        
        // Event data
        var evtSource = event.getSource();        
        var whichButton = evtSource.getLocalId();
        var map_key = evtSource.get("v.value");
        var dict_map = component.get("v.dataMap");
        console.log("Original value ");
        console.log(dict_map);

       dict_map[map_key] = whichButton; 
       console.log("New value "); 
       console.log(dict_map); 
       component.set("v.dataMap", dict_map); 
}

How can I change the lightning component code so that a selection is marked (so the end-user knows what they've selected)?

I was thinking of making it as such

User PDF[] CSV[] XML[] - Chosen: PDF

where it is currently 

User PDF[] CSV[] XML[]

However, I'm running into the problem of not knowing how to "return" the button that was chosen so that it can be displayed correctly for each user.