Using Custom States to Store the Last Viewed Page When Refresh
In this Bubble.io tutorial video we demonstrate how to convert a menu that uses Custom States to hide and show parts of your page to a menu that uses a User database field. We explain the advantages of saving the current view to the User to maintain a consistent user experience.
Unlock the power of custom states: Learn how to build a seamless one-page app with persistent navigation, even after page refresh!
Master user experience: Discover how to store and retrieve the last viewed page, creating a smooth UX that keeps users engaged.
Transform your Bubble app: Elevate your navigation game with dynamic menu items and conditional statements.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.