How to dynamically hide/show a lightning-accordion-section?

How would I create an aura component on an opportunity page layout with 6 accordion sections, one for each opportunity stage, and automatically hides all sections except the one related to the current stage?

For example:

If the opportunity is currently in Stage 3, the accordion menu would display:

 > [Stage 1 Header]
 > [Stage 2 Header]
 V [Stage 3 Header]
    ....content....
    ....content....
 > [Stage 4 Header]
 > [Stage 5 Header]
 > [Stage 6 Header]

Then, without a page refresh required, when the stage changes to "Stage 4", it would automatically collapse the Stage 3 section, and open the Stage 4 section.

Answers 1

  • Try the below code it should work and let me know if it works. When updating the stage, the component will not refresh as i am using Lightning Data Service.

    AccordianList.cmp

    <aura:component implements="flexipage:availableForAllPageTypes, flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickActionwithoutheader" 
                    controller="OpptyCtrl"
                    access="global" >
        
        <aura:attribute name="opportunityRecord" type="Opportunity"/>
        <aura:attribute name="recordError" type="String"/>
        <aura:attribute name="stageNames" type="List"/>
        <aura:attribute name="activeStage" type="String"/>
        <aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
        
        <force:recordData aura:id="opportunityRecordCmp"
                          recordId="{!v.recordId}"
                          fields="Id,StageName"
                          targetFields="{!v.opportunityRecord}"
                          recordUpdated="{!c.recordUpdated}"
                          targetError="{!v.recordError}" 
                          mode="VIEW"/>
        
        <div class="slds-box slds-theme_default">
            <lightning:accordion aura:id="accordion" activeSectionName="{!v.activeStage}">
                <aura:iteration var="num" items="{!v.stageNames}" indexVar="idx">
                    <lightning:accordionSection name="{!num}" label="{!num}"></lightning:accordionSection>
                </aura:iteration>
            </lightning:accordion>
        </div>
    </aura:component>
    

    AccordianController.js

    ({
        doInit: function (component, event, helper) {
            helper.doServerSideCall(component, 'getOppStageNames', 'null').then(
                function(ContactInfo) {
                    component.set("v.stageNames", ContactInfo);
                    component.set("v.activeStage", component.get("v.opportunityRecord").StageName);
                }
            );
        },
        recordUpdated : function(component, event, helper) {
            let changeType = event.getParams().changeType;
            
            if (changeType === "ERROR") { /* handle error; do this first! */ }
            else if (changeType === "LOADED") {
                let stageName = component.get("v.opportunityRecord");
                component.set("v.activeStage", stageName.StageName);
            } else if (changeType === "CHANGED" && (('StageName' in event.getParams().changedFields))) {
                component.set("v.activeStage", event.getParams().changedFields.StageName.value);
            }
        }
    });
    

    AccordianHelper.js

    ({
        doServerSideCall : function(component, apexAction, params) {
            let self = this;
            try {
                return new Promise(function(resolve, reject) {
                    let action = component.get("c."+apexAction+"");
                    if( params != 'null' ) { action.setParams( params ); }
                    action.setCallback(this, function(response) {
                        let state = response.getState();
                        if (state === "SUCCESS") {
                            resolve(response.getReturnValue());
                        }
                    });
                    $A.enqueueAction(action);
                });
            } catch(exception) { }
        }
    })
    

    OpptyCtrl.cls

    public class OpptyCtrl {
        
        @AuraEnabled
        public static List<String> getOppStageNames() {
            List<String> stageNameMap = new List<String>();
            Schema.DescribeFieldResult fieldResult = Opportunity.stagename.getDescribe();    
            List<Schema.picklistEntry> vls = fieldResult.getPicklistValues();    
            for(Schema.picklistEntry v:vls) {
                stageNameMap.add(v.getValue());
            }
            return stageNameMap;
        }
    }
    

Related Questions