Advanced One Page App Navigation - Layers/Back-Stacks

Hi, :slight_smile:

The navigation behavior I am trying to achieve is best understood by looking closely at Instagram:

  • You start in the Feed and then scroll to let’s say 4500px & click on a username
  • A new layer is created above the feed layer (“back-stack”)
  • Then you scroll & check out the user’s profile
  • (If you continue and view other users or posts - additional layers get created on top of the existing layers)
  • Once you hit the back button - the layer on top gets closed and you get to the layer below - which in this case would be the Feed & you can continue where you left off (scroll-position 4500px)

Problem:

In my app I have got an infinite scroll feed and if I hide it - and show it again when the user goes back - the UX is very bad, because the RepeatingGroup’s Content needs to be reloaded and the user gets taken to the top (scroll-position 0px).

A partly solution to this is to save the “last scrolling positions” and then to run javascript to scroll to the “last saved scroll position”. However the UX is very bad as the content needs to be reloaded - then you need a pause - and then you can scroll to the position the user left off.

  1. First Problem: How am I able to create these layers? Using 1 group for all users, results in having to reload that group again & again.
  2. Second Problem: How to “hide” the groups below without hiding them in a bubble sense?

Possible Solutions:

  1. I thought about Popups but they don’t seem to work how they should.
  2. I was thinking about “hiding” the groups by reducing their height to 0px/1px using CSS. However I was not able to do it properly.

Has anyone any ideas on how to achieve that? Or maybe some other ideas on how to achieve the intended behavior smoothly?

I believe “back-stacks” are a much needed feature for bubble - to create really good mobile applications.

Thanks in advance. :raised_hands:
Maze

1 Like

I would guess Floating Groups that float on top

Send them to the back using custom CSS Z-index

If you have another element or even a custom state to hold the data you want to display in the RG instead of a search on the RG datasource, you reference the other element or custom state as a datasource, it wouldn’t need to reload in the sense of fetching the data again. You can also use the ‘make static’ operator on the data so it doesn’t update automatically when database changes.

Learn More

Boston85719 is an expert Bubbler with a decade experience as an educator. Real name Matthew, he has been actively building SaaS apps, marketplace apps, scheduling apps and more for clients, himself and for sale as templates.

As an official Bubble Bootcamp Instructor, he leads Bubble Bootcamps on a regular basis.

Always willing to offer advice via the Bubble Forum, Matthew also offers Private Personal and Group Training Sessions.

Through his site, NoCodeTrainer, Matthew provides a range of tutorials with editor access to help you jumpstart your Bubble development.

Always accessible you can send Matthew a private message via the forum or send an email directly with your requests.

Be sure to checkout the Stripe Integration Course when you are ready to integrate Stripe payments to start monetizing your application via product sales or subscriptions.

Stripe Integration Course

NoCodeTrainer.com

1 Like

Thanks for the fast answer. I am going to try to implement.

I think the problem with this is that the page below (feed) is longer than the layer (user profile) and therefore it will be possible to scroll past the layer. But I will try it out.

Floating Groups float relative to the page, so it would scroll with the user scrolling.

Z-Index is about layers and if it is behind the other elements on the page because of the Z-index it will not be visible.

1 Like

Hi, did you manage to achieve this?

Hi, yeah somehow.

I created a structure of “reusable elements” that have conditional visibility + “collapse when hidde: yes” on a page.

If you play a little by putting them inside groups, changing height and you are able to do it with some limitations, eg. only for 1 navigation as the page is reloaded after that (when changing data source)

PS: But a “back-stack” as smooth as Instagram “is not possible” or very hard to do in bubble.

1 Like