Reverse repeat

How can I change repeat settings so that records are displayed not from top to bottom, but rather from bottom to top? Perhaps someone has a custom solution?

The most banal example of use: message feed in messenger.

I would be grateful for any advice and suggestions.

Well, why not sort it in the query builder by ID DESC?

Will this help rendering in reverse order on the frontend?

Of course… that’s the idea of sorting options.

I feel like we’re talking about different things… :thinking:

The data on the front end renders in the same order it’s returned by the query builder. If you sort it by ascending order it will be repeated like that. If descending order is set there, it wi be repeated in descending order.

It’s obvious. But my post is about something else. I need seting repeat component to draw the list/tables not from top to bottom, but from bottom to top.

To make it clearer. Imagine a list with the first element starting at the bottom of the monitor screen and the last element ending at the top of the monitor.

How can this be done?

Well… isn’t what I am saying the same?
Sort by ID DESC will sort your items exactly like that.

Exactly at Teodor says. In your Server connect query under the 'Sort' tab add your id column or what ever column you want to sort by and select 'desc'.

Another example. Imagine a list that needs to be scrolled up, not down, for new items to appear. And new items will load from the top of the screen, not from the bottom.

Once again, isn’t that the same i am talking about?

Order ASC:

Order DESC:

Are you talking about reverse infinite scroll? i.e telegram, signal

Finally! Exactly! :laughing:

Well, maybe just explain your question more detailed next time …
There is no an infinity scroll component available out of the box in Wappler.

1 Like

Perhaps the community has custom solutions?

I haven’t taken a go at it as I haven’t seen the need but if I had to I would look into:

1 Like

Thanks!

Update: In fact, the problem I wrote about above is not infinite scrolling. Infinite scrolling, can be recreated in the Wappler very easily, with the help of pagination + a small script.

What I write about in this thread, in principle, is also not difficult to do yourself, just by writing your own repeat function. But perhaps it makes sense for the Wappler to add an additional setting to the repeat component?

This idea arose for three reasons:

  1. With a custom solution, it will be more difficult to work, and therefore less effective.
  2. This setting can be useful for many users. More precisely, anyone who wants to build the functionality of the messenger in their application based on the Wappler.
  3. This setting is implemented very easily in App Connect (at least at first glance).

This is about the dmx.repeatItems function in App Connect. Now it works so that after checking the data type, it proceeds to add elements to the array e using the push method. As a result, the array is obtained as follows:
7

As you know, the standard of user interfaces in messengers today is the same for everyone and they all look like this:

Thus, it is impossible to recreate the standard interface of the messenger by means of Wappler today. But if you make minimal improvements to the dmx.repeatItems function, it will be possible. To do this, you must:

  • In the interface of the repeat component, you need the "reverse" checkbox.
  • In the function dmx.repeatItems, an additional check is made after checking the data type, if the "reverse" setting is selected, then adding elements to the array e is performed not using the push method, but using the unshift method.
    In this case, the array is obtained as follows:
    8

And this is exactly what is required to build the messenger interface.

@George, how realistic is it to add this setting to App Connect?

Where is your data coming from, you can’t push/unshift data to the repeater, it is just a simple loop. If you want to loop it in reverse then just make sure the dataset is already in reverse order or alternative you can use the reverse formatter on the repeat expression.

I was going to say the same. I was back at square 0 as Teodor yesterday. If your problem is not doing a reverse infinite scroll and how to dynamically update the content following the same reverse order I don’t understand then. Just retrieve the data from the database and sort a timestamp in ascending order.

If we still don’t understand your problem I think you should make a test page and explain there the limitations by making use of the components and data you need.