0

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.

0

You can get this directly from the event when it fires.

setLPTsListView: function(component, event, helper) {
  var openSections = event.getParam("openSections");
  ...

You can also read the activeSectionName attribute directly:

setLPTsListView: function(component, event, helper) {
    var openSections = component.find("schedAccordion").get("v.activeSectionName");
    ...

If allowMultipleSectionsOpen is true, this attribute is an array, otherwise it is a String.

  • var openSections = event.getParam("openSections"); You get this how? Using chrome tools ? – user533 May 24 at 21:58
  • @user533 I think so. It's not in any docs I could find, only a handful of people seem to know about this. – sfdcfox May 24 at 23:03

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.