Hello Wappler experts.
I was following this great manual - https://docs.wappler.io/t/nested-repeat-regions/5165 and in overall it went just fine: I was able to re-create what’s shown in the lesson in my app, but in my case those nested repeats (repeat2 in the lesson) might be hundreds of entries.
And my question is: is there is an option or a workaround how I can hide/show specific repeats?
Do you mean the records in the nested repeat? Or the nested repeats might be hundreds?
What's the logic here - do you want to hide them based on some value or anything else?
Maybe explain more detailed what are you trying to achieve.
) Those orange entries might be a lot. I would like to have a button (blue) to show/hide that specific nested repeats (orange) for repeat (green).
Wappler structure:
You can use accordions for this. You just need to adjust your repeating structure to the accordion.
@Teodor Just tried accordion approach but in that case all accordions are “opening” at once. But I would like to have that specific accordion to “open”.
Most probably you are using the same ids. You need to make sure they have differnet (dynamic) ids and the buttons also point to them.
That's what i mean by
You just need to adjust your repeating structure to the accordion.
@Teodor May you please provide a little bit more info where to look in to?
I do have unique IDs for primary repeat - but what to do with them?
I am referring to the accordion code, not the repeat expressions …
Now accordion has a child repeat and I set unique id to be an id from the query, but cards are still collapsing all at once.
I can’t really answer without seeing your code.
<div class="container">
<div class="accordion" id="accordion1" is="dmx-repeat" dmx-bind:repeat="serverconnect1.data.repeat_get_filters" key="id">
<div class="card">
<div class="card-header" id="accordion1_headingOne">
<h5 class="mb-0">
<button id="accordion1_collapseOne_Btn" class="btn btn-link" type="button" data-toggle="collapse" data-target="#accordion1_collapseOne" aria-expanded="true" aria-controls="collapseOne">{{name}}</button>
</h5>
</div>
<div id="accordion1_collapseOne" class="collapse" is="dmx-bs4-collapse" show="true" aria-labelledby="accordion1_headingOne" data-parent="#accordion1">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
data-target="#accordion1_collapseOne"
and
id="accordion1_collapseOne"
are currently same for all your accordion items. These must be unique and dynamic, not static like now.
They should become something like:
dmx-bind:data-target="'#accordion1_collapseOne_' + dynamic_id_here"
and
dmx-bind:id="'accordion1_collapseOne' + dynamic_id_here"
To be honest I hoped it could be managed without going in to the code.
Thank you for your time and effort @Teodor
Will post here if I can make it.
Not possible in this exact case, but that's not something bad ...
After I found similair topic Dynamic Accordion Usage in general I got the idea but now I have question: How it’s possible to retrieve unique ID from Server connect action and add it as a unique value to the cardeon card?
It's explained in my last post where to put the dynamic value.
So now my code looks like this, but it won’t work as expected:
<div class="accordion" id="accordion1" is="dmx-repeat" dmx-bind:repeat="serverconnect1.data.repeat_get_filters" key="id">
<div class="card">
<div class="card-header" id="accordion1_headingOne">
<h5 class="mb-0">
<button id="accordion1_collapseOne_Btn" class="btn btn-link" type="button" data-toggle="collapse" data-target="'#accordion1_collapseOne' + {{serverconnect1.data.repeat_get_filters[0].id}}" aria-expanded="true"
aria-controls="collapseOne">{{name}}</button>
</h5>
</div>
<div id="'accordion1_collapseOne' + {{serverconnect1.data.repeat_get_filters[0].id}}" class="collapse" is="dmx-bs4-collapse" show="true" aria-labelledby="accordion1_headingOne" data-parent="#accordion1">
<div class="card-body">
Test text
</div>
</div>
</div>
</div>
and
are wrong.
First, you did not add dmx-bind: to them as explained in my example.
Second - the dynamic part is wrong.
Both expressions should be:
dmx-bind:data-target="'#accordion1_collapse' + id"
and
dmx-bind:id="'accordion1_collapse' + id"
@Teodor Thank you so much for being patient with me.
In the end code should look like this:
<div class="container">
<div class="accordion" id="accordion1" is="dmx-repeat" dmx-bind:repeat="serverconnect1.data.repeat_get_filters" key="id">
<div class="card">
<div class="card-header" id="accordion1_headingOne">
<h5 class="mb-0">
<button id="accordion1_collapseOne_Btn" class="btn btn-link" type="button" data-toggle="collapse" dmx-bind:data-target="'#accordion1_collapseOne' + id" aria-expanded="true" aria-controls="collapseOne">{{name}}</button>
</h5>
</div>
<div dmx-bind:id="'accordion1_collapseOne' + id" class="collapse" is="dmx-bs4-collapse" show="true" aria-labelledby="accordion1_headingOne" data-parent="#accordion1">
<div class="card-body">
Test text
</div>
</div>
</div>
</div>
</div>