Im completely new to lighting so I get stuck quite easily. I have looked online for examples but found none. I have created a lightning accordion that uses an aura iteration to display a list of records loaded during the init method. I am able to see the records and expand them just fine. The problem is that I need to be able to read the currently expanded accordionSection and retrieve the record that is displayed there from another component in the same page. Code is as follows:
component
---------
<aura:component controller="ScheduleController" implements="flexipage:availableForRecordHome,force:hasRecordId" >
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<aura:attribute name="schedule" type="List"/>
<!--<aura:registerEvent name="setLPTsListView" type="c:LPTsResult"/>-->
<lightning:accordion aura:id="schedAccordion" onsectiontoggle="{!c.setLPTsListView}" ><!--"{!setLPTsListView}"-->
<aura:iteration aura:id="schedIteration" items="{!v.schedule}" var="sched" indexVar="indx">
<lightning:accordionSection name="{!indx}" label="{!sched.Sched_Name__c + ' - ' + sched.Schedule_Type__c}">
<aura:set attribute="body">
<p><b>Due Date</b> : {!sched.Due_Date__c} </p>
<p><b>Effective Date</b> : {!sched.Effective_Date__c} </p>
</aura:set>
</lightning:accordionSection>
</aura:iteration>
</lightning:accordion>
</aura:component>
component controller
--------------------
({
// Load schedule from Salesforce - this works fine
doInit: function(component, event, helper) {
// Create the action
var action = component.get("c.getSchedule");
var recId = component.get("v.recordId");
action.setParams({ pLoanId : component.get("v.recordId") });
// Add callback behavior for when response is received
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.Schedule", response.getReturnValue());
console.log(' Schedule: ' + JSON.stringify(component.get("v.Schedule")));
}
else {
console.log("Failed with state: " + state);
}
});
// Send action off to be executed
$A.enqueueAction(action);
},
//here is where im stuck!!! this method is called when the accordionsections are toggled
setLPTsListView: function(component, event, helper) {
alert(component.find("schedAccordion"));
//here i need to be able to get the "indx" variable relating to the current expanded accordionSection and pass in the
//schedule record to the schedulePayments component (further below in post)
}
})
schedulePayments component
--------------------------
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" >
<!--HOW DO I POPULATE THIS FROM THE OTHER COMPONENT???
IT SHOULD ONLY INCLUDE LPTs FROM THE CURRENT SCHEDULE RECORD IN THE ACCORDION COMPONENT (which already has child records so dont need to query them, just pass them into here-->
<aura:attribute name="LPTs" type="List"/>
<!-- SCHEDULE LPTs-->
<aura:iteration items="{!LPTs}" var="lpt">
<lightning:card variant="Narrow" title="{!lpt.Name}" iconName="standard:Schedule__c">
<p class="slds-p-horizontal_small">
INSERT LPT DATA AS CARD BODY
</p>
</lightning:card>
</aura:iteration>
</aura:component>
all i need is some examples where i can read up and figure out how to get the expanded accordionsection with the schedule and the related LPT data (its a child record of the schedule and is included in the doInit methods initial schedule query.
