There's no denying it that one-page apps just like this one are a very popular way for building no-code apps in Bubble and for structuring your no-code app.

Disadvantages of one page Bubble apps

Now personally, I'm not a fan because a one-page app can very easily spiral out of control and you can end up with thousands and thousands of groups on your page which both slows down the Bubble editor and it slows down the experience to users.

Advantages of one page Bubble apps

However, there are some advantages such as the fact that the whole page doesn't reload between each of the panels I've got here, each of the groups that I'm choosing to display. In this Bubble tutorial video I'm going to show you a different way to achieve a one-page design that doesn't use custom states.

Why Custom States aren't great for one page apps

At the moment when I click on orders or click on dashboard, I'm setting a custom state to dashboard so that it knows which group to show. This is my dashboard, these are my orders, and now they have conditional statements on based on the custom state. I'm going to show you a different way and I'm going to show you a way that I think has a huge advantage which is that it actually changes the URL so that if you wanted to link directly to the Orders tab you can do so. If you're emailing back to one of your app users and saying this is what you need to do here's where you can find that button and you're using custom states you can't link them back like deep link or directly link them to the bit that you're referring to.

Discover more Bubble tutorials

Let me show you a different way but before I do that if you're learning Bubble you need to check out our website planetnocode.com. We've got hundreds of Bubble tutorial videos, some which you cannot find on YouTube you can only find if you're a member at planetnocode.com.

The way that we're going to do this is instead of using custom states we're going to use URL parameters. So I've got a repeating group here of views and views is an option set and I'm just going to update the workflow. So instead of setting a state, I'm going to navigate to a page, but the same page that I'm on, and I'm going to send a URL parameter. And so I'm just going to say view equals current sales view display. Now that's because I'm using an option set. If you need a little reminder of an option set, we've got a view option set here and this is going through each of my dashboard items. And the reason I have that is because in a previous video I've shown how you can add in an icon into an option set using Font Awesome.

Demo URL page parameters

But for now, if I go back here and refresh it, if If I click on Dashboard, it adds to the URL. If I click on Orders, you'll notice it doesn't actually refresh the page. The page didn't blink out and blink back in. It simply updates the URL. Settings, it looks like it's got space on the end of it. Let me fix that. There we go. So now if I go back to my panels, or my sections, I can set these up slightly differently. I can say, clear that, I can say get data from URL and say view is the key and these are my display view option sets and I'll say when views is, I'll just try this, maybe I've got to use the display option. No, that's not going to take it. So when display is dashboard, I'm going to show it. I'm also going to add an or statement here because dashboard is my first option, so I'm going to say get data from URL view. "Display is empty". I'm going to copy this onto Orders. I'm sort of a bit suspicious that by using option sets, I might... this might not work, but I'm going to try and if it doesn't work, I'll fix it. So instead of dashboard, we're going to say orders. Let's test that.

So dashboard is... dashboard is visible, then orders, settings. okay, yeah it works. So let me put this into settings, so that settings is visible. So yeah, this is the strength of doing it this way. Look, I can refresh my page and because settings, that data is in the URL, it's going to take me straight back to settings. If I'd used custom states it would have taken me back to dashboards.

And you'll notice that we get the same quick, the page is not blinking out each time I change what group is being displayed. And so this is by using go to, navigate go to, to the same page and changing a URL parameter so that you can then dictate which groups are shown based on conditional statements.