See More

Wappler General Need Help
1

Good morning,

my page will consist of a list of events, I would like every 20 events to have a see more button appear

I was thinking of using a paginated query, but I want to keep the first events visible, not as is currently the case with pagination, do you have an idea?

THANKS

2

What about the excellent Infinite Scroll extension? Its in the Wappler Extensions list here:

3

More info here:

4

thanks TMR i will try

1 Like
5

Just a heads-up...that was a proof of concept extension to see what the process was like for building an app connect component. I don't maintain it, and actually, don't even use it. :slight_smile:

2 Likes
6

I'm using it in a few areas now and it's working perfectly, Wappler should really have something like this as standard.

2 Likes
7

I think a lot of Wappler users would agree. It's been requested in at least 3 feature requests (old but not forgotten):
August 2018 - 25 votes
December 2018 - 79 votes
February 2019 - 28 votes

2 Likes
8

Yes eventually we have to implement something like this natively in app connect. It is a big deal because we will have to extend existing data fetched by server connect action instead of fully replacing it, so it will require some ground work @patrick

4 Likes
10

Maybe this can help:

I have a project working with a repeat children which expression is:

serverconnect1.data.myarray.top(var1.value)

var1 is a simple variable:
<dmx-value id="var1" dmx-bind:value="15"></dmx-value>

My see more button is:
dmx-on:click="var1.setValue(var1.value+15)

Everything is working fine :slight_smile:

Here is some code to play with:

<body is="dmx-app" id="seemore">
<dmx-serverconnect id="serverconnect1" url="../dmxConnect/api/wapplercommunity/seemore.php"></dmx-serverconnect>
<dmx-value id="var1" dmx-bind:value="15"></dmx-value>

<div class="row" is="dmx-repeat" id="repeat1" dmx-bind:repeat="serverconnect1.data.myarray.top(var1.value)">
<div class="col-12">
<p>The number is {{id}}</p>
</div>
</div>
<div class="row">
<div class="col">
<button id="btn1" class="btn" dmx-on:click="var1.setValue(var1.value+15)">See more</button>
</div>
</div>
<script src="../bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

Also you can use:
dmx-hide="((var1.value >= serverconnect1.data.myarray.count()) || serverconnect1.state.executing)"

It seems so simple that it scares me a little, but never had an issue...

PS: Of course, depends on how much data you can load at once, so every case is different...

3 Likes
11

It's Good Thanks

1 Like