I have built my apps using multiple pages. And those multiple pages have a reusable header element using the slidebar menu.Could this be done as a one page app? where the separate pages are joined and using groups? Especially for saving and editing data?
Hey @pvhwebdesign,
Quick answer - yes! You can definitely do this by using visibility conditions to toggle on/off the groups. It really depends on your app for what’s best though. If you plan on building a native app, you’ll be required to put it all on a single page and use groups to section everything off just like you described. However, if there’s a clear separation of content and engagement, I’d consider separate pages. Perhaps study some of your own favorite web apps/sites out there and see how they do it.
Longer answer…
I’ve built apps using both methods (regardless of mobile app goals), and I’ve found that having everything on one page makes switching between groups or “pages” happen faster and feel more like a native application rather than experiencing constant web page changes (even if those are fast too). However, I have also noticed that there is a point where it feels heavy and the editor is slower to load a single page and if you’re not hyper organized, you end up spending more time searching for the element you need and constantly toggling visibility on/off to work with things.
Take a social network for example:
I’d want 1 page to cover all user settings - privacy, preferences, bio, photo, account management, etc.
I’d want another page to cover all messaging - inbox folders, composition box, notifications, etc.
Another page to cover a feed - scrolling list of images and text that I can interact with…
All of those sub-interactions within the pages would of course be sectioned off into groups whose visibilities are controlled by conditions and sub-menu tabs of sorts. Imagine all of that in 1 single page - kind of a lot to manage. But having said that, I’ve absolutely built an app (project management, not social network, but many similar features) that is completely on a single page so I can speak to the ups and downs.
Feel free to bounce your ideas around here. Again, it really depends on what you’re doing. There are great cases to be made for both methods.
Gaby | Coaching Bubble
2 Likes
Okay. this is a lot to take in. And I really appreciate it, My only real hurdle is to use a slidebar to hide/show elements. But the header slidebar is its own element. it wont see the groups.
Haha, sorry. I have an overshare problem when it comes to Bubble.
You’re right, you need to use a separate element for each page if you want the sidebar to interact with elements on the page.
You could also consider this alternative for keeping the reusable element with slidebar:
When menu item is clicked > navigate to page and send a URL parameter.
On page load and [get data from url] is [parameter value] > show element or set custom state.
For example:
When “Pricing” is clicked in slidebar > navigate to FAQ page and send additional parameter: key = question, value = pricing.
Then on FAQ page, when page is loaded and get question from URL is pricing > show group that contains pricing text or whatever…
You’ll notice that your URL will be something like myapp.com/FAQ?question=pricing.
You can send multiple parameters too. Not sure if this will satisfy your exact need, but maybe?
1 Like
Awesome thanks! I will definitely look into this!
1 Like
Hi,
Just found your topic while wondering if i should create new page for every “section” of my app or use hide/show groups.
Besides the fact that can be a lot to manage, i’m wondering if it can lead to slow page loading to have all in one page ?
Thanks