+ Start a Discussion
Akshay ShrivastavaAkshay Shrivastava 

onclick get data

I have accounts names and their child object name also like,, contacts and opportunity.. 
i want that when i click any account name ,, then a alert is shown on page showing the name of that account name. 
this is my lightning component code,, it is in working condition now i only want to add above feature. 


   
    <aura:attribute name="accList"
                    type="List"/>
    
    <aura:handler name="init"
                  value="{!this}"
                  action="{!c.doInit}"/>
    
    <div class="slds-border_bottom">
        <h1>Accounts</h1></div>  
    <div class="slds-scrollable_y">
        <div class="slds-text-longform">
            
            <lightning:accordion>
                <div class="demo-only demo-only--sizing slds-grid slds-wrap">
                    <div class="slds-size_1-of-2">
                        <div class="slds-box slds-box_x-small slds-text-align_left slds-m-around_x-small">
                            
                            <aura:iteration items="{!v.accList}" 
                                            var="acc">
                                
                                <lightning:accordionSection name="{!acc.Name}" 
                                                            label="{!acc.Name}">
                                    
                                    
                                    <div class="slds-scrollable" style="height:10rem;width:24rem">
                                        <div class="slds-text-longform" style="width:150%">
                                            
                                            <lightning:tabset selectedTabId="one">
                                                
                                                    <lightning:tab label="Contacts" id="one">
                                                        <aura:iteration items="{!acc.Contacts}" var="con" indexVar="index">
                                                            <li>Contact {!index + 1} Name : {!con.Name}</li>
                                                            <li>Contact Phone :</li>
                                                            <p><lightning:formattedPhone value="{!con.Phone}"></lightning:formattedPhone></p>
                                                            <br></br>
                                                        </aura:iteration>
                                                    </lightning:tab>
                                                
                                                    <lightning:tab label="Opportunities" id="two">
                                                        <aura:iteration items="{!acc.Opportunities}" var="opp" indexVar="index">
                                                            <li>Opportunities {!index + 1} Name : {!opp.Name}</li>
                                                            <li>ID : {!opp.Id}</li>
                                                            <br></br>
                                                        </aura:iteration>
                                                    </lightning:tab>
                                            </lightning:tabset>
                                        </div>
                                    </div>
                                </lightning:accordionSection>
                            </aura:iteration>
                        </div>
                    </div>
                </div>
            </lightning:accordion>
        </div>
    </div>
    
</aura:component> 
Best Answer chosen by Akshay Shrivastava
CharuDuttCharuDutt
Hii Akshay Shrivastava
Try The Below Code
 <aura:attribute name="accList" type="List"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="activeSections" type="List" />
    <div class="slds-border_bottom">
        <h1>Accounts</h1></div>  
    <div class="slds-scrollable_y">
        <div class="slds-text-longform">
            
             <lightning:accordion activeSectionName="{! v.activeSections }" onsectiontoggle="{! c.handleSectionToggle }">
                <div class="demo-only demo-only--sizing slds-grid slds-wrap">
                    <div class="slds-size_1-of-2">
                        <div class="slds-box slds-box_x-small slds-text-align_left slds-m-around_x-small">
                            
                            <aura:iteration items="{!v.accList}" 
                                            var="acc">
                                
                                <lightning:accordionSection name="{!acc.Name}" 
                                                            label="{!acc.Name}">
                                    
                                    
                                    <div class="slds-scrollable" style="height:10rem;width:24rem">
                                        <div class="slds-text-longform" style="width:150%">
                                            
                                            <lightning:tabset selectedTabId="one">
                                                
                                                    <lightning:tab label="Contacts" id="one">
                                                        <aura:iteration items="{!acc.Contacts}" var="con" indexVar="index">
                                                            <li>Contact {!index + 1} Name : {!con.Name}</li>
                                                            <li>Contact Phone :</li>
                                                            <p><lightning:formattedPhone value="{!con.Phone}"></lightning:formattedPhone></p>
                                                            <br></br>
                                                        </aura:iteration>
                                                    </lightning:tab>
                                                
                                                    <lightning:tab label="Opportunities" id="two">
                                                        <aura:iteration items="{!acc.Opportunities}" var="opp" indexVar="index">
                                                            <li>Opportunities {!index + 1} Name : {!opp.Name}</li>
                                                            <li>ID : {!opp.Id}</li>
                                                            <br></br>
                                                        </aura:iteration>
                                                    </lightning:tab>
                                            </lightning:tabset>
                                        </div>
                                    </div>
                                </lightning:accordionSection>
                            </aura:iteration>
                        </div>
                    </div>
                </div>
            </lightning:accordion>
        </div>
    </div>
</aura:component>





Conroller

({
    doInit : function(component, event, helper) {
        var action = component.get('c.fetchAcc');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var allValues = response.getReturnValue();
                console.log("allValues--->>> " + JSON.stringify(allValues));
                //component.set('v.activeSections', allValues.Name);
                component.set('v.accList', allValues);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    }
                }
                else{
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
    },
        handleSectionToggle: function (component, event, helper) {
                var openSections = event.getParam('openSections');

        if (openSections.length === 0) {
            alert("All sections are closed");
        } else {
            alert(openSections);
        }

    }


})
Please Mark It As Best Answer If it Helps So It Can Help Others In Future.And It Motivates us To Give More In Community
Thank You!
 

All Answers

CharuDuttCharuDutt
Hii Akshay Shrivastava
Try The Below Code
 <aura:attribute name="accList" type="List"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="activeSections" type="List" />
    <div class="slds-border_bottom">
        <h1>Accounts</h1></div>  
    <div class="slds-scrollable_y">
        <div class="slds-text-longform">
            
             <lightning:accordion activeSectionName="{! v.activeSections }" onsectiontoggle="{! c.handleSectionToggle }">
                <div class="demo-only demo-only--sizing slds-grid slds-wrap">
                    <div class="slds-size_1-of-2">
                        <div class="slds-box slds-box_x-small slds-text-align_left slds-m-around_x-small">
                            
                            <aura:iteration items="{!v.accList}" 
                                            var="acc">
                                
                                <lightning:accordionSection name="{!acc.Name}" 
                                                            label="{!acc.Name}">
                                    
                                    
                                    <div class="slds-scrollable" style="height:10rem;width:24rem">
                                        <div class="slds-text-longform" style="width:150%">
                                            
                                            <lightning:tabset selectedTabId="one">
                                                
                                                    <lightning:tab label="Contacts" id="one">
                                                        <aura:iteration items="{!acc.Contacts}" var="con" indexVar="index">
                                                            <li>Contact {!index + 1} Name : {!con.Name}</li>
                                                            <li>Contact Phone :</li>
                                                            <p><lightning:formattedPhone value="{!con.Phone}"></lightning:formattedPhone></p>
                                                            <br></br>
                                                        </aura:iteration>
                                                    </lightning:tab>
                                                
                                                    <lightning:tab label="Opportunities" id="two">
                                                        <aura:iteration items="{!acc.Opportunities}" var="opp" indexVar="index">
                                                            <li>Opportunities {!index + 1} Name : {!opp.Name}</li>
                                                            <li>ID : {!opp.Id}</li>
                                                            <br></br>
                                                        </aura:iteration>
                                                    </lightning:tab>
                                            </lightning:tabset>
                                        </div>
                                    </div>
                                </lightning:accordionSection>
                            </aura:iteration>
                        </div>
                    </div>
                </div>
            </lightning:accordion>
        </div>
    </div>
</aura:component>





Conroller

({
    doInit : function(component, event, helper) {
        var action = component.get('c.fetchAcc');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var allValues = response.getReturnValue();
                console.log("allValues--->>> " + JSON.stringify(allValues));
                //component.set('v.activeSections', allValues.Name);
                component.set('v.accList', allValues);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    }
                }
                else{
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
    },
        handleSectionToggle: function (component, event, helper) {
                var openSections = event.getParam('openSections');

        if (openSections.length === 0) {
            alert("All sections are closed");
        } else {
            alert(openSections);
        }

    }


})
Please Mark It As Best Answer If it Helps So It Can Help Others In Future.And It Motivates us To Give More In Community
Thank You!
 
This was selected as the best answer
Suraj Tripathi 47Suraj Tripathi 47
Hi Akshay Shrivastava,
Aura component:
<aura:component controller="accountsWithContactsClass" implements="flexipage:availableForAllPageTypes" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.myAction}"/>
    <aura:attribute name="accounts" type="Account[]" />
    <table>
        <tr>
            <td>
                <b>Name</b>
            </td>
            <td>
                <b>Industry</b>
            </td>
            <td>
                <b>Contacts</b>
            </td>
        </tr>
        <aura:iteration items="{!v.accounts}" var="accs1" >
            <tr>  
                <td> {!accs1.Name}  </td>
                  <td> {!accs1.Industry}  </td>
                 <!--   <td>   {!accs1.Contacts.lastName}  </td> -->
                <table>
                    <aura:iteration items="{!accs1.Contacts}" var="con1" >
                        <tr>
                            <td>{!con1.LastName}</td>
                        </tr>
                    </aura:iteration>
                </table>
            </tr> 
         </aura:iteration>                                           
    </table>



component js file:
 
</aura:component>
({
    myAction : function(component, event, helper) {
        var action =component.get("c.getAllAccounts");
        console.log('The action value is: '+action);
         action.setCallback(this, function(a){ 
             
            component.set("v.accounts", a.getReturnValue());
           //  console.log('The accs are :'+JSON.stringify(a.getReturnValue()));
            console.log('The accs are :'+JSON.stringify(a.getReturnValue()));
          
        });
        $A.enqueueAction(action);
    }
})






Apex Class:
 
public class accountsWithContactsClass {

@auraEnabled
public static list<account> getAllAccounts()
    {
       list<account> accs =[select id,name,phone,industry,(select lastName from contacts) from account limit 10];
      //  list<account> accs =[select id,name,phone,industry from account limit 10];
     //   return [select Id,Name from account limit 10];
     return accs;
    }
}

if you find your answer then please mark it as the best answer
Thanks, And regards,
Suraj Tripathi.