Tutorial: "Back" handling for long list screens (retain viewport position)

One of the big issues that we face is that when we are viewing a long list of items, click an item to go to the item detail screen, and then click back, we’re taking to the top of the screen and the page refreshes.

This really sucks when you’re scrolling like a social media feed and you click the comments and go back only to be back at the very beginning of the feed!

Here’s what I’ve done to accomplish a ‘back handler’ to retain the position in the viewport of the list screen:

On your list screen: Add an input called “Back post viewer” and an input called “post reloader”. For the “back post viewer” input, set a default value of the maximum ID number of the list. On the “post reloader” input, set a default value of 0.

I have the list sorted by ID #, high to low. There is a filter where post id is less than or equal to back post viewer:

Also add a button added that says load previous posts. Set the visibility of the button to only visible when post reloader is equal to 1.


Add 2 actions to this button. Change input value of “back post viewer” input to maximum post id and change input value of post reloader input to 0.

When someone clicks the image or comments, they’re taken to a new screen that displays either the image or the comments for the post.

Now, when we click back to go back to the list, we add 2 actions before the link back. Change input value of Back post viewer to the current post > post id and change the input value of the “post reloader” input to 1.

So when a user goes back to the list, they will be taken to the top of the screen but the post they were viewing is now the top post on the list and they can resume scrolling down the list from the spot they were at previously.

7 Likes

Good workaround. :+1:

1 Like

Great (I want to say hack, but it’s not a hack, it’s logic), so great logic! : )

1 Like

Awesome tutorial as always Dude! :sunglasses: :muscle:

1 Like

will the button be visible to users?

The load previous posts button? Yes, this button is visible to users or else we wouldn’t be able to load the previous posts again.

You still get scrolled up to the top, but we basically start the list from the last post the user was viewing. The button is only visible after a user has clicked to the new screen and then clicks back.

1 Like

Thank you for this great tutorial @Flawless !

  • Can you please explain how to add the inputs “Back post viewer” and “post reloader”? I added two text inputs, but I’m unsure if that’s what you did.
  • “There is a filter where post id is less than or equal to back post viewer” – currently the available filters are “equal to”, “not equal to”, and “contains”. Is there any workaround?
    This same filter doesn’t show me an option to link to the text input “Back Post Viewer”.

If you could make a video tutorial that’d be very helpful!
Thank you!

Clever man!

1 Like

Yes, the 2 inputs are hidden above the search posts input. They are transparent and covered by a rectangle:


Ensure that the “Post ID” is a number parameter, not a text parameter. Number parameters can be compared with = > < operators, whereas text cannot.

Were you able to get it?

1 Like

Thank you for your impressive tutorial :clap:

I’ve been following your instructions step by step (super clever strategy btw), but it’s not working. I think that the inputs are not updating with the new values when coming back from the post detail page.

I’ll submit a ticket and see if the Adalo team sees something.

Thanks again!

Just curious – which values have you given to your posts?
I have 10, 9, 8, … for 10 posts sorted from high to low.

Let’s try somethin’.

Remove the default value of the max id in the back post viewer input. On your link that leads into this post list screen, set a ‘change input value’ action to change the Back Post Viewer input on the post list screen to the maximum post id. Because maybe the default value is resetting when going back for your app there. This way, we still fill that input with a value but it won’t have a default value to reset itself to.

The same way you do. They are sequentially numbered from when they’re posted. First post is 1, 2nd post is 2, etc.

1 Like

brilliant!

1 Like

Thank you for your problem-solving @Flawless!

Here’s what’s happening:

On the product list page – when the user taps on one product, it links to the product detail page 1. This detail page has two buttons:

Button 1: It links to the product detail page 2. This page has a “close” button with the actions you described that successfully brings the user back to the product list page and does the intended UX – hurrah!!

Button 2: This one is a back button that has the exact exam same configuration as the close button on the product detail page 2, but when it goes back to the product detail page it doesn’t work.

I’ve tried linking the product list page to a duplicate of the product detail page 2, but it still doesn’t work.

Any idea on what am I missing?

I have no clue off top. Perhaps some screenshots of the actions and screens would help.

Thank you for looking into this – the Adalo support team hasn’t been able to find the issue so far.

Here’s the whole flow:

The intended UX WORKS WHEN the user goes: Nested List “Layout 4” > Detail Page 1 “Card Result 5” > Detail Page 2 “Card Result 4” (presses “X” button”) > Goes back to Nested List “Layout 4”

With the same configuration, the UX DOESN’T WORK WHEN the user goes: Nested List “Layout 4” > Detail Page 1 “Card Result 5” (presses “back” button”) > Goes back to Nested List “Layout 4”

I’ve tried all kinds of hacks I could imagine (duplicating Detail Page 2 and swapping it for Detail Page 1, redoing all the screens, etc) but so far I haven’t found why the data resets in the Nested List “Layout 4” when the user comes from Detail Page 1 “Card Result 5” and not when the user comes from “Card Result 4”

For context, here are a few screenshots:
In the Nested List page (“Layout 4”) I’ve included the back post viewer and post reloader without default values (it doesn’t work with default values)






It’s not easy to understand with the screenshots. Can you do a screen recording and walk through the flow, and show an example of what’s happening and what should happen?

Feel free to shoot that to me in a message. Then, we can try to further troubleshoot where the data connection is missing.

1 Like

Thank you so much for all your support @Flawless!

After trying several paths, I finally found a solution: The Link needs to go “Back” in order to work. I had the link connecting directly to a specific screen, so it wasn’t working in any way.
Now that the link is updated to “Back” is finally working! Hurrahhh!!!