Using URL parameters with Single Page Apps
Chances are high that you must have heard about Single Page Apps (SPA) at least once on the Bubble forum. And because Single Page Apps don’t navigate you to another page, an important question to answer is how will you handle content visibility
The answer is with URL parameters
What are URL parameters?
URL parameter is the text of a URL that follows a question mark. It consists of a key and a value, separated by an equal sign. Multiple parameters can be added to a single page by using an ampersand.
URL parameters are common and are preferred by nearly all the top tech companies to transmit information between pages. But we can use URL parameters to show and hide different groups on the same page as well.
To learn more about using URL parameters, read How to use URL parameters in Bubble.io
What are Single Page Apps (SPA)?
A SPA is an app that works inside your browser and does not need to reload during use. Facebook, Twitter, Gmail, GitHub, all use some form of SPA and URL parameters.
It is just one web page which you visit and it then loads the required content based on the requirement. As a result, they are fast.
When to use a SPA?
SPA are perfect for some use cases while not suited for others. Some common cases where it makes sense to use a SPA are
- You are creating a native mobile application. SPA will reduce your page load times and you can use beautiful transitions to give your app a native feel.
- CRM. Most of the CRM apps have a single page and use the sidebar to show/hide different content.
- Project management tools
When not to use a SPA?
If the app you’re creating falls into any of the 6 examples below, don’t create a SPA.
- Ecommerce sites
- Marketplaces
- Catalogues and listing platforms
- Social media apps
- Forums
- Sites which rely heavily on SEO (blogs, podcast directories etc)
Why use URL parameters and not custom states
A common approach used by Bubble beginners is to use custom states. It’s not wrong and even I was guilty of using them for a long time. However, custom states are not an efficient.
The biggest drawback of using custom states is that they reset whenever the page is refreshed. Another drawback is that your users cannot use the back button in the browser. If they do, they’ll be navigated off your website.
Consider a case where a user lands on your website https://xyz.com/. If you’re using custom states, the user will be navigated away from this page when they press back button.
If however, you use URL parameters, when they navigate from https://xyz.com/ to https://xyz.com?product=1 and then to https://xyz.com?product=2, they’ll be navigated back from https://xyz.com?product=2 to https://xyz.com?product=1.
As a result, they’ll still be on your website. And this makes sense.
No professional Bubble app uses custom states. They all use URL parameters.
Even Amazon, Facebook etc use URL parameters. Don’t believe me? Check the URL the next time you’re shopping on Amazon.
How to hide and show groups using URL parameters
I have created 2 full width groups to demo how you can hide/show different groups using URL parameters
Clicking on the blue texts will change the URL structure of the page. This is in turn will hide and show different groups.
To begin with, we need to make all groups hidden on page load.
Next, we want the height of the hidden group to collapse when hidden. This will make sure that there is no empty white space when a group is hidden.
Once this is done, we can set conditions on each group on when to show them. As they are hidden by default, we only need conditions to show them.
I’ll be using the word “tab” to denote which group I want to show. You are free to name it whatever you’d like. It does not matter. So when the parameter “tab” in the URL matches with the visibility condition of a group, that group will become visible.
Go to the Conditional section of each group and create a new condition.
Remember the parameter name and the value that you’re specifying here. This will be important when setting up the workflows. Do the same for all the workflows while keeping the parameter name same but the value different.
Setting up workflows
We need two types of workflows
- When the “tab” is empty
- When the “tab” is not empty
When the “tab” is empty or the page has just been opened, we can set a default value. This can be useful if we want to show a fixed group on page load.
I’m creating a workflow that if on page load, the “tab” is empty, the “tab” value should be updated to 1. This will make the Group 1 to be visible.
The other workflows that we need are when the “tab” is not empty and we want to show/hide groups.
If you need some help with your Bubble app or if you need a team of Bubble developers to build a Bubble app for you, reach out to me at himanshu@nocodeassistant.com. You can also follow me on Twitter.
