I have been hunting for a guide on how to get a list to start at the bottom when the list is refreshed, ie for a chat app.
I can see some discussion about cloning (but can’t find any information) and can see that there is a “start at end” block inside layout (but I can’t seem to get this to work.)
Any help would be greatly appreciated.
Kind regards
Hi @matthewmcguire4321lz, thanks for reaching out about this. There is a Scroll to End block as part of our Layout component that you would want to use here for this.
The basic gist here is that if you are setting up a Layout to hold a message and a repsonse for the chat, after you clone the Layout, you’ll then use the Scroll to End block for the entire screen Layout so that you see the newest chat message first. Here is an example for one we built.
It’s very popular right now but creating a chat app is particularly advanced. Let us know if you have any further questions as you are building this out.
Thank you for responding so quickly and for the input!
Yes this does seem fairly tricky!
So I think I am almost there with this solution. The only thing I am struggling with is how to clear Container 5 before making another pass ie without duplicating items from the list into Container 5. Does that make sense?
Is the only way to deal with it to track and delete the clones somehow?
Thanks for the help!
(For anyone else reading this, a lot depends on the way the layout and containers have been setup in the Design screen. Also, in terms of the blocks, I think the idea is to have an invisible container that you are then cloning and passing to the visible container.) (Further, the clone blocks can be found in “Advanced” in the blocks list on the left.)
I think I understand what you are saying but let me know if I’m off track. If you are wanting to ensure that the data is not loaded multiple times, you’ll want to use the remove block and the all components in container block. You can add these into a function to clear all the previous data.
Excellent, that works perfectly, thank you.
As far as I can tell everything is now how it should be but container 5 doesn’t scroll to the bottom.
Both Layout3 and Container 5 are marked as scrollable.
Hopefully I am making a simple error.
Thank you for the help!
It sounds like you are very close to getting this completed, awesome to see!
One quick suggestion would be to move the scroll to end out of the conditional inside the loop?
If that does not work, would you mind showing the design tab so we can see how the screen is laid out?
