BS5 dynamic accordion - js file not generated by Wappler

[swf]

I’m struggling with implementing a dynamic BS5 accoridion. The static version works. Am I missing here anything or is there a bug in Wappler?

<div class="article accordion accordion-article  pb-5"  id="accordion1">
    <div class="card" dmx-repeat:repeatcards="scFaq.data.qryFaq">
        <div class="card-header" dmx-bind:id="'accordion1_heading' + FAQID" data-bs-toggle="collapse" dmx-bind:data-bs-target="'#accordion1_collapse' + FAQID" >
            <h5 class="mb-0">
                {{FAQTitel_de}}
            </h5>
        </div>
        <div dmx-bind:id="'accordion1_collapse' + FAQID" class="collapse" is="dmx-bs5-collapse"   data-bs-parent="#accordion1" >
            <div class="card-body">
                <div dmx-html="FAQText_de">
                </div>
            </div>
        </div>
    </div>
</div>

[swf]

I just see that there is an error:

BaseComponent.js:303 Unknown component found! bs5-collapse

Is the macOS version not inserting/uploading the bs5component?

I also see in the ui that no dynamic attributes show up. Is it possible to build a dynamic (database driven) bs5 accordion at all?

[ben]

Dynamic Accordion

[swf]

Thanks Ben. My code is more or less the same. The main problem seems that Wappler is not generating the Bootstrap5Collapse.js at all. It’s missing! So it’s a Wappler bug.

Can you (or maybe someone else) please upload your dmxBootstrap5Collapse.js here so I can use it (or the zipped folder if there are some more files in the parent folder)? Thanks in advance

[Teodor]

Hi Andre,
You say the static version works? Is it working without the js file then and is the js include missing? Also how do you add the accordion to the page?

[swf]

Hi Teodor.

Yes, the static version works without the js file (which is not added). The include is missing.

I add the accordion via the ui.

Maybe you can upload the js file here, as I need to continue on the project and I’m currently stuck. And I don’t want to move back to bs4 right now

[Teodor]

@swf

BaseComponent.js:303 Unknown component found! bs5-collapse

To fix this all you need to do is to add the collpase component in app structure and the js file will be added in the head. Then you can remove the collapse from the page.

[swf]

Great, thanks a lot Teodor!

[George]

All include files are added automatically when you insert the component from the UI.

We used to have an extensive missing files check on each page save but it was slowing down everything considerably so we removed it.

Did you copy and paste the component code from other site or so?

[swf]

I’ve just not added the collaps component first. I’ve just added an accordion. Maybe when a user adds the accordion, Wappler should check if the component has already been added?

[Marc]

This post and @ben video has really helped me out big time as I was stuck on dynamic accordion

Strangely when the accordion cards are dropped on the content page the script dmxBootstrap5Collapse.js is not added to the layout page, however out of the box the collapsing works fine!!!

Once you make it a dynamic accordion as per Ben video Dynamic Bootstrap 5 Accordion then the collapsing doesn’t work anymore.

Then you have to add the dynamic collapse component in order to get the script added to the layout page as mentioned in this post by @Teodor in order for the dynamic accordion to work.

For novices this is very hard to work out without this post and Ben video

Should dropping the accordion on a page not add the dmxBootstrap5Collapse.js script?

[Teodor]

This has been fixed in Wappler 4.7.2