Change URL path with reusable elements?

Questions
1

Hello Bubble,

I’ve been thinking of re-structuring an app that I’m working on. The app is primarily developed with reusable elements and only a handful of pages. However, I’ve been thinking it would also be possible for the app to have just 1 page and all of the other “pages” would be converted into groups or reusable elements that I’d hide and show based on certain conditions or actions.

While this is possible, I’m wondering if I can still do this, and still have the URL path change to show what “page” the user is on.

If anyone could point me to any threads on the forum that may have already answered this, I’d greatly appreciate it. I couldnt find exactly what I was looking for myself but I might have missed a blind spot.

Thank you

1 Like
2

There are some plugins to help with this “sudsy” and this thread - How do you custom your site URLs - #3 by boston85719 (I don’t use them, just know of them)

Under the covers, the javascript is “pushstate” to alter the browser history - so search around for this also.

2 Likes
3

Thank you very much. I will give it a look.

4

You can do that…I end up creating a option set for the ‘pages’ and then the groups on the single page will have conditions to hide or show based on the URL path…the path is of type ‘option set’ that I created…then need to change the state of the URL path…one problem there is Bubble doesn’t recognize this until a page refresh has been completed so some users incorporate custom states as well.

There are plenty of threads on the forum going over the various plugins that allow you to alter a URL.

1 Like
5

Hmm. Very curious.

I’ll definitely play around. While I’m sure my client will not mind one way or another, I was more wanting to challenge myself to see if I could build the entire app while only having the single “index” page.

I was also wondering about the benefits of this. This seems more prime for an app that is meant to also be deployed as a mobile app, but I figured it would also improve performance for a web-based app as well.

Thank you for tips everyone. I cant wait to dive into this.

6

If you use the navigation action that goes to a page, you can pass parameters in the URL. The cool thing about Bubble is that if it’s the same page that you’re currently on then it won’t refresh the whole page but it will change the URL to show the new parameters that you passed to it (for example, yourdomain.com/page_name?parameter_name=parameter_value) If you have conditionals on groups to show or hide based on parameters in the URL (“get data from URL”), then this is how you can make a one-page app that fully supports the browser navigation history and back and forth buttons.

2 Likes
7

That is the method I typically use. Major drawback of that is there is no option to set a path. In the event that a path is the desired look of the URL then it is not an option, but if a parameter in the URL is okay, then I personally think that is the best approach as well.

1 Like