I’m trying to implement two requirements in a ‘single page’ app:
When a user is selects an item from a RG (let’s say their are 100 rows and they’ve scroll down to select #50), the following page (the Details Page) should load at the top of the screen.
When the user selects ‘Back’ (either a button, or using the native Browser back button) they should be taken to the same row in the table they just navigated from.
For #1 I’ve use the ‘Scroll to Top’ action in the On Click workflow, however, this comes with an animation… I don’t so much want Bubble to ‘Scroll’, I just want the position changed. Is there a way to do this without the scroll animation?
I assume you mean storing the users current scroll position as a param, and then reading that on page load? This may work for an in-app back button, but my understanding is that this wouldn’t work for the native back button…
Hard to say exactly what is on your mind because it involves UX. Normally the easier way is to use “scroll to element” or “scroll to entry of a repeating group” actions to move the user’s point of view within the same page.
Do this “Details page” is loaded as a Floating Group? This could be a way to maintain this ‘page’ always at the ‘top’ of your page. Or do you ‘navigate’ to another page when user clicks on an RG cell using URL parameters?
So if you are navigating using URL parameters for a SPA, the simple action “go to previous page” should work to get the user back where he last was. Also scrolling to the entry of a RG would work but in that case you’d have the scrolling animation.
If you could share a quick video of how it is working now maybe it would be easier for us to visualize what you are trying to do.
Example of desired behaviour:
On Google, if a user scrolls down the list of search results selects one, then selects the browser ‘back’ button (any browser) they are returned to the exact result the selected.
Example of Bubble behaviour:
In Bubble, when I click the URL Params are updated, which hides the ‘Jobs’ Group and shows the ‘Details’ Group (‘Details)’ - you will note the ‘Scroll to’ action is used. When I click ‘back’ using the browser button, the previous URL [/params] are loaded, re-showing the Jobs listing group and hiding the Details group:
[Optional step] Because I want to scroll to the top of the page I’m navigating to (remember it’s a single-page app so really navigation is just hiding/showing groups) In the above workflow I also have an action Run Javascript to take user to top of the page, which eliminates the animation caused in the ‘Scroll to’ Workflow. Note there is also a pause of 10ms prior.
I have a ‘on page load’ workflow, so that when the user clicks the ‘Back’ button, it scrolls to the value set in the Custom State we created in Step 1, and set the value of in Step 2 (also has a 10ms pause before the JS). NOTE: I have conditionals on the workflow so that I only run it when specific params are in URL
So you say, @boston85719, but has anyone ever seen us in the same place at the same time? True, the lack of that evidence could be due to the fact that we live on opposite sides of the planet. Or, maybe we are, in fact, the same person. Even I’m not so sure now.
