Independent browse history for each tab

Hello Bubblers. I’ve built a single page app (SPA) using URL paths and parameters. Everything works fine, but I’m trying to improve user experience by having an independent browser history for each tab. For example, I have tab 1 and tab 2, each one a different URL path, let’s say that I press tab 1 and it’s a list of products, so I click a product and it takes me to view the product . In bubble terms I’m still in tab 1 URL path and adds a URL parameters of product=productID. Let’s say now that I press tab 2, so I go to the main page of tab 2, and I start navigating in that tab. What I want to achieve is that whenever I press again tab 1, I go back to the specific place where I was in my last interaction within tab 1, in this case, to see the product that I was looking for.
Any idea how can I achieve this? Also it would be even better if once I’m back into tab 1 I have its own history, so that if I press back it takes me not back to tab 2 but to the last page I was in before that one in tab 1. Makes sense?
Please help! Haven’t found anything on this on the forum.

I would say you could store the parameters in a custom state when they switch pages, and when they switch back you just set the parameter to whatever was set in that state.

Alternatively have you considered using a series of parameters tracking all URL paths?

For example, imagine a URL with segmented parameters, 1 for each tab: , etc. So when you’re changing tabs, you’re only adjusting the parameter for the tab you’re on. So if user is on tab 2, you’re just updating the search keywords, so when they switch to tab 3, it references user3, etc.

1 Like

Thanks @msgiblin ! I think this worked in terms of functionality but it did add important lags when navigating the page. It’s a SPA what I have and this is what I have done:

  1. Save the URL to a custom state for each tab that I have on conditionals, so for example I have 6 pages, then I added 6 custom state variables for each one and then added 6 on page load workflows with conditionals based on the page that it goes to, so that if i get to “home” let’s say then it saves that URL to home_custom_state.
  2. I added some conditionals when the tab is clicked, so if it’s the first time clicked it sends me to the initial page of the tab given by me, but if there’s a URL on the custom state associated to that tab then it sends me to that one. I think here is where I’m getting that lag, since it has to run these workflows to define where to go rather than directly going to the initial page.
  3. on the back buttton I needed to make some changes as well, as now the send to previous page workflow would not work if I’m coming back from another page. In this case what I did was to add other list custom states for each page and then I recorded the history of each page independently , by only adding the URL to the current page’s custom state. This way I’m giving the back button a funcitonality to look for the URL history saved on the custom state based on the page that I’m currently in and then send to the previous page and deleting the last one (as it should change udpate the history list).
    When finished all this, it worked pretty well in terms of functionality, but it added this lag on navigation that I didn’t like at all , so I sadlt turned back to y old approach that doesn’t need any of these conditionals when the tabs or back button is pressed. If anyone has any other ideas it’d be great to experiment.
1 Like

Thank you for the follow up and thorough report on what you tried vs performance! I haven’t done anything nearly that involved with URL navigation yet so I appreciate you really digging in.

One thing I wondered as I read through your update… wondering if each time the page loads onto a new tab, you then load those URL parameters into a custom state on the current page. Now when the user clicks another tab, or back, you simply reference the value in the state that was already preloaded. I don’t know for sure but I imagine it would move that ‘lag’ you’re seeing to the beginning of the process in a way that is more invisible to the user and wouldn’t impact perceived user experience.