Using Custom States for One-Page App Navigation
This video is a direct follow-on from a previous video showing how to use custom states to build a one-page app and navigation. So this is using custom states, let's load in the page. And I have it set up to load in dashboard as the default value. And then I can toggle between my different screens for the user using this repeating group. But the shortfall here is that if my user is looking at my account and then let's say they refresh the page, they're taken back to dashboard.
Storing the Last Viewed Page
In this video, I'm going to demonstrate how to store this as a field within the user data type so that if they refresh the page, it remembers the display, the part of your app that they were looking at and it loads that in. So let's go into the UI builder. And first of all, I've got the menu set up as an option set with my different menu items here. And I'm now going to use it and create a field called viewing menu item. And then it's a type menu in order to make use of the option set. I'm not using a text value, I'm storing an option set.
Updating the Repeating Group
Let's go back to my repeating group which shows my menu option set. At the moment, this is set up to use custom states, but we're going to change that to data, make changes to current user. And then viewing menu item is, we're doing it dynamically, is current cell's menu. Okay, and then the only other things to update are the conditional statements on each of the groups here.
Setting Up Conditional Statements
As a reminder, in order to get the one-page effect, I have each of these set to not display on page loads and to collapse when hidden. But at the moment, they're set to use the custom state. So let's remove that. And instead, it's when current user views menu item is for this one dashboard. And then let's update this one. Current user viewing menu item is my account. And then let's have current user viewing menu item is billing. Okay, I think that's ready to test.
Handling Default Values
Okay, right, we've noticed the first little bug which you'd have to work out, which is before when I was using a custom state, I'd set a default value. One way around this, at least for new users registering for your app would be to go into data, use a viewing menu item, and then to choose my dashboard. So they have a value stored in there the moment they register, sorry, dashboard, yeah. So that when they visit this page in my app, I know that some data will be displayed to them.
Alternative Approach for Existing Users
Another workaround, let's say you've already got users registered, would be to add in another statement here. And that will be an or statement to say that when the current user viewing menu is empty, also show the elements. So if I get this to refresh, we should now see dashboard. So those are two approaches there to ensure that when a user visits this page, they're not met with a blank.
Testing the Implementation
And now when I click on these menu items here, it is updating the field in the user. And we can check that by going into, in fact, we can't because I was gonna say we could check that by going into data and looking at app users, but I'm not actually logged in currently. And so the, so Bubble is using a cookie to save data for me as current user, which if I was then to complete a registration workflow would be assigned to that user that I register.
Final Result
But so you can see this works just as well, even though I'm not logged in for storing data. And let's now refresh it. And you'll see, whereas custom states would jump back to the page on load state. Now it remembers the part of my one-page app that I was viewing.