Reverse repeat

[Mr.Rubi]

@patrick

Where is your data coming from, you can’t push/unshift data to the repeater, it is just a simple loop.

I've thought about it, and I really have to agree with you. The option that I suggested above does not solve the problem that is present at the moment and because of which the development of the functional interface of the messenger is complicated.

@JonL

If your problem is not doing a reverse infinite scroll and how to dynamically update the content following the same reverse order

You got it right. That's exactly the problem. I will note that basically this is not even reverse infinite scrolling, but rather how to dynamically update the content following the same reverse order.

I think I found a solution that will work with the existing Wappler functionality. But I haven't gotten to the work computer yet to check. If it is possible to display a request with pagination starting from the last page, without first loading the previous ones, this will solve the problem and allow you to create a functional interface of the messenger exactly as it should be by all standards.

[JonL]

So your data is

…
Feb 1st
Feb 2nd
Feb 3rd
Feb 4th
Feb 5th
Feb 6th

You want to display on your page/widget/whatever:

Feb 4th
Feb 5th
Feb 6th

And when you update you want it to end like this:

…
Feb 1st
Feb 2nd
Feb 3rd
Feb 4th
Feb 5th
Feb 6th

[Mr.Rubi]

That’s right. But for a better understanding, I will make a couple of clarifications:

1. If the data was updated only on the server (a new record was added to the database: Feb 7th), the user should see:
   Feb 5th
   Feb 6th
   Feb 7th

2. If the user wants to see the previous entries, the user should see:
   Feb 1st
   Feb 2nd
   Feb 3rd
   Feb 4th
   Feb 5th
   Feb 6th
   Feb 7th

I think it is possible to implement this through pagination, which is displayed from the last page, but so far I have not checked. If pagination works, will have to deal with the layout of the message window, because need to focus at the bottom of the message list. This will not be easy to do.

[JonL]

Thanks for the additional info. I will take a go at it too. I think it is an interesting use case to tackle.

[Mr.Rubi]

I experimented and thought a lot about how to implement the messenger interface now using Wappler, and I again came to what I suggested earlier.

@patrick

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.

That's not quite true, @patrick. I may be wrong, but let me give you an example where it makes sense. We have a database with messages:
message 05/02/2021
message 06/02/2021
message 07/02/2021
message 08/02/2021
message 09/02/2021
message 10/02/2021

Obviously, we want to see the most recent messages on the screen. But when it comes to messenger, we want to see the most recent messages on the screen at the bottom, next to the text input area.

Currently, it is not possible to implement this task in Wappler. However, if you implement the setting for the repeat component, which I wrote about above:

Reverse repeat

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: With a custom solution, it will be more…

I think, it would help in achieving the task.

What would it look like:
On the server side, we would create a paged request with a limit of 3 records and reverse order, so that the records are loaded like this:
message 10/02/2021
message 09/02/2021
message 08/02/2021
...

Then, on the client side, for the repeat component, we would also enable the reverse logic, so that an array of records that came from the server would be created in the form:
message 08/02/2021
message 09/02/2021
message 10/02/2021

We would implement loading of old records via a button click event, which would increase the limit of records for the request. And when clicked, the user would see:
message 05/02/2021
message 06/02/2021
message 07/02/2021
message 08/02/2021
message 09/02/2021
message 10/02/2021

Thus, it would be possible to implement the messenger interface by means of a Wappler.

In the event that I am wrong, I will be grateful if you indicate what exactly I am wrong.

Might anyone have any more ideas of how you can now implement the interface of the messenger with the help of Wappler?

[patrick]

How are you planning to implement the the loading of older records, is it getting the just a larger recordset or do you use some custom code to join the new records with the already loaded records?

Why is the reverse formatter not working for you? It does exactly what you want, it transforms the array and returns it in the reverse order for the repeater.

[Mr.Rubi]

I don’t know how it happened… Honestly. I tried many things and thought about more, but I didn’t try the simplest and most obvious - the client-side formatter…)))

I’m sorry, Patrick, for this misunderstanding. The wappler can do everything need right now. As you correctly noted, the client-side formatter does exactly what I need.

[montassar_akrmi]

It’s not quite that simple. The issue arises in the client’s browser when new data is added. Instead of appending the new messages to the existing ones, the browser ends up recreating all the messages. This can lead to a laggy scrolling experience, especially on less powerful devices.

[Mr.Rubi]

It seems that this problem occurs when updating AppConnect to version 2. I tried with the updated AppConnect and came across similar behavior. However, my production applications use the old AppConnect and everything works fine on it. Since I haven't updated production applications yet, I can't help with solving this problem right now, because I haven't thought about a solution yet.