0

i tried to create accordion section dynamically by constructing the section name and the data inside accordion in the JS file. Method in JS will call apex method that will deserialize JSON response from API callout and return it to JS.

<template>
<lightning-accordion allow-multiple-sections-open active-section-name={activeSections}>
    <div class="slds-box details-box">
        <template for:each={mapData} for:item="ss">
            <lightning-accordion-section key={ss.value} name={ss.value} label={ss.value} class="slds-border_bottom">
                <div class="slds-grid slds-gutters_x-small slds-size_full slds-container--center">
                    <div class="slds-col slds-grid slds-wrap slds-size_1-of-1 slds-container--center">
                        <template for:each={ss.data} for:item="data" for:index="index">
                            <div key={data.label} class="slds-col slds-size_1-of-1 slds-border_top" style="background-color:#fafaf9">
                                <div class="slds-size_1-of-1 slds-border_bottom slds-p-top_xx-small slds-p-bottom_xx-small">
                                    <div class="slds-grid slds-wrap">
                                        <div class="slds-col slds-size_1-of-2">
                                            <div>
                                                {data.label}
                                            </div>
                                        </div>
                                        <div class="slds-col slds-size_1-of-2">
                                            <template if:true={data.isButton}>
                                                <button class={data.class} onclick={handleButtonClick}>{data.value}</button>   
                                            </template>
                                            <template if:false={data.isButton}>
                                                <div class={data.class}>
                                                    {data.value}
                                                </div>
                                            </template>        
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </lightning-accordion-section>
        </template>

        <!--ACTIONS-->
        <lightning-accordion-section name='ACTIONS' label='ACTIONS' class="slds-border_bottom">
            <div class="slds-grid slds-gutters slds-size_full slds-container--center">
                <div class="slds-col">
                    <div style="background-color:#fafaf9">
                        <div class="slds-grid slds-wrap slds-border_top">
                            <div class="slds-size_1-of-1 slds-p-top_xx-small slds-p-bottom_xx-small">
                                <div class="slds-grid slds-wrap">
                                    <div class="slds-col slds-size_2-of-2">
                                        <div class="driver-widget-actions">
                                            <button class="slds-button slds-button_brand action-button gopay-action-button">
                                                Transaction History
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </lightning-accordion-section>
    </div>
</lightning-accordion>
@track mapData = [];
@track activeSections = ['ACTIONS'];
connectedCallback() {
    this.loadObjectDetails();
}


async loadObjectDetails() {
    await getObjectDetailsResponse()
    .then(results => {
        const customerDetailsData = customerDetailsSchema(results);
        const accountDetailsData = accountStatusSchema(results);
        
        this.mapData.push({value: 'CUSTOMER DETAILS', data: customerDetailsData}); 
        this.mapData.push({value: 'ACCOUNT INFORMATION', data: accountDetailsData});

        this.activeSections = [...this.activeSections,'CUSTOMER DETAILS','ACCOUNT INFORMATION'];
    })
    .catch((err) => {
        console.log({ gopayCalloutError: err });
    });
}

The problem is, the active-section-name not working as expected. The expectation is to open 'CUSTOMER DETAILS','ACCOUNT INFORMATION', and 'ACTIONS' section automatically. But its not opening the section for CUSTOMER DETAILS and ACCOUNT INFORMATION. Only open the section for ACTIONSenter image description here

I tried to hardcode the mapData value in JS file instead of calling apex method to get the value from deserialized JSON, its working fine, the accordion opened as expected. But if using apex method to populated mapData, its not working. Any idea?

1 Answer 1

3

Rendering only happens when the browser gets a moment to download, so you need to:

async loadObjectDetails() {
    await getObjectDetailsResponse()
    .then(results => {
        const customerDetailsData = customerDetailsSchema(results);
        const accountDetailsData = accountStatusSchema(results);
        
        this.mapData.push({value: 'CUSTOMER DETAILS', data: customerDetailsData}); 
        this.mapData.push({value: 'ACCOUNT INFORMATION', data: accountDetailsData});
        await Promise.resolve();
        this.activeSections = [...this.activeSections,'CUSTOMER DETAILS','ACCOUNT INFORMATION'];
    })
    .catch((err) => {
        console.log({ gopayCalloutError: err });
    });
}
1
  • I tried to put promise resolve after calling getObjectDetailsResponse, and it`s working fine now. Thanks @sfdcfox!!! Commented Mar 25, 2022 at 6:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .