How to Use URL/Page Parameters in Bubble.io

Подписаться 22 тыс.

Просмотров 22 тыс.

50% 1

Looking for a way to send more than one type of data to a separate page in your Bubble app?
URL parameters allow you to send and extract different data types between pages, all without having to reference data stored in your database.
In this video, I'll explain everything you need to know about using URL parameters in Bubble. Using a live example, I'll walk through the steps of creating a custom search experience where we pass URL parameters to a search results page. On that page, we'll then extract the page parameters to display a list of relevant results.
Topics covered throughout this tutorial include:
1. What are URL parameters and when to use them
2. How to send URL parameters to another page
3. How to extract page parameters from a URL string
4. How to display data based on custom URL parameters
---
About me:
In 2020, I worked directly with the Bubble team to write their 'How-to build' blog series. Each installment shared written instructions on how to recreate popular products using their no-code tool. Since the beginning of 2021, I've focussed on creating my own video series to teach no-code makers how to get the most out of Bubble's platform.
Note: This video series has no direct affiliation with Bubble themselves. This is something I've created on my own.
---
Timeline:
00:00 - URL parameters overview
01:30 - When to use URL parameters in Bubble.io
03:42 - How to create custom URL parameters
08:38 - How to extract and display URL parameters
15:07 - Live parameters demo
16:14 - Additional insights

Наука

Опубликовано:

9 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 65

@arthurpereira6072 4 месяца назад

after 2 days , 3 hours each i solved the problem! LOVE U!!!!

@BuildingWithBubble 4 месяца назад

Love you to 😘 Glad it could help!

@LeraMulina Год назад

Thank you very much! Your lessons on Bubble are super-super-super helpful!

@BuildingWithBubble Год назад

Always glad it can help ✌

@kevinsloan5805 Год назад

Amazing, I needed a good way to use URL parameters and this video did an amazing job explaining it. Thank you so much!

@BuildingWithBubble Год назад

Always glad it can help 👏

@RicardinhoL_5 2 года назад

Thank you for this video, you saved my life! 😉

@BuildingWithBubble 2 года назад

Glad it could help. I've got you 😎

@luminrabbit9488 2 года назад

Another great tutorial !!!

@BuildingWithBubble 2 года назад

Thanks! Plenty more on the way 😎

@MrEchayko 2 года назад

Amazing content. You are the only one who can explain data transfer in URL that actually works. A+++

@BuildingWithBubble 2 года назад

Always glad it can help ✌ URL paramaters took me a bit to wrap my head around in the beginning, but once you get the hang of it, you'll start to see how powerful they are!

@MrEchayko 2 года назад

@@BuildingWithBubble thank you trully for your hard work and amazing content 🙏

@mobifinsolutions1956 11 месяцев назад

Very clear indeed

@georgegrimany7840 2 года назад

Another great one. Thank you

@BuildingWithBubble 2 года назад

Glad it could help 👏

@chal9230 Год назад

Superb. Thanks.

@BuildingWithBubble Год назад

Glad it could help 😎

@bartekgracz-kp6dk Год назад

Thank You, it is a good explanation.

@BuildingWithBubble Год назад

Happy it could help 😎

@rasaadister 2 года назад

Thanks a lot for this video!!

@BuildingWithBubble 2 года назад

Glad it could help! I remember trying to learn page parameters when I first got started in Bubble. They can initially be quite confusing to get your head around!

@rasaadister 2 года назад

@@BuildingWithBubble Yes. I was very confused too and your style of teaching explained everything effortlessly. Thanks again!

@Officialchens Год назад

This man is a genius.

@BuildingWithBubble Год назад

I got you 😎

@w.g.meijer7388 Месяц назад

legend!

@BuildingWithBubble Месяц назад

I got you 😎

@mattjohnson8009 4 месяца назад

Lachlan do you have a video showing how the "Buy Tickets" part works? I am trying to get data from a repeating group over to a form on another page

@BuildingWithBubble 3 месяца назад

Hey, I'd recommend checking out my course on creating a Ticketmaster clone: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-AwHnmKxdb4k.html Hope this helps point you in the right direction!

@akispapas7463 2 года назад

Thank you Lachlan. Nice and clear. Question: Is there any way to export data from a RG through url and display it to another page

@BuildingWithBubble 2 года назад

Glad it could help! And what kind of data are you looking to send through the URL from the RG? If you're looking to send through one field e.g. the unique IDs from a list of users, this would be possible. If you were looking to send through a number of different fields, though, it might be best to try and temporarily store the data in your database, then delete it once it's no longer needed. Hope this helps.

@akispapas7463 2 года назад

@@BuildingWithBubble Will follow your advise. Thank you my friend

@user-xc5vj2zh2g 10 месяцев назад

You're a genius Lachlan I've been watching your videos for months now and it has helped me alot but i have an issue i’m creating a chat app and I have a repeating group of conversations and a repeating group of messages on the left and right side respectively i use the “Display data and Data to send function in my workflows” but each time i refresh the page, the data dissappears How am i going to stay on the same page when the page is reloaded

@BuildingWithBubble 10 месяцев назад

Appreciate it. I'm glad the content is helpful! And good question. Instead of storing data just within the group, I'd recommend storing data with a URL parameter. If a page has a URL parameter and is refreshed, it will remain there When someone clicks to open a chat, you could use a navigation event to send the user to the page they're currently on, they send through a URL parameter with the unique of the chat you'd like to display. When you send someone to the same page they're already on in Bubble, it will just reload the data, so the user experience is still fast Then, you can have your group reference a list of messages where the original chat belongs to the chat stored in your URL parameter Hope this helps point you in the right direction!

@sivasai2211 2 года назад

Thank you @Lachlan Kirkwood

@BuildingWithBubble 2 года назад

Glad it could help!

@bilalmarazi6041 2 года назад

Thanks! How I would do the same if I am extracting data from an external API? What changes to do with the type of content and source for the repeating group to be used?

@BuildingWithBubble 2 года назад

Once you connect an API through the API connector or a plugin, you'll have the option to set the content type of a repeating group to be the API endpoint. From here, you can choose to pull of the results from the endpoint, you could could filter any of the parameters (data fields of the API endpoint) by the page parameter in a similar fashion to this tutorial. It's a little complex to explain over text, but I'd by happy to try and record a tutorial for this when I get the chance.

@xuamox 2 года назад

What if I have a list of Events with Dates and Names and a link to "Add Tasks" for each event. The "Add Tasks" link needs to know what Event ID is associated to it. Can I pass that Event ID via the "Add Tasks" link, and deliver it to the "Add New Tasks" form, and if so, what is the correct way to then pass that Event ID to the form and save it in the DB?

@BuildingWithBubble 2 года назад

Hey mate, when redirecting a user to another page, include a parameter called 'event-id' and store this as the event content type. Then for the value of the parameter, you can select from the 'current cell's event'. Let me know if this helps.

@Kumar-pe2nl Год назад

I have one doubt bro - how to another website url load into the browser from bubble by changing the http response headers.

@BuildingWithBubble Год назад

Happy to help. Just to clarify, you want your Bubble app to open a URL of another website?

@mihajloskulic4454 3 месяца назад

Hi, is it possible that if the user hasn't selected any criteria and just clicks search button, the page displays all of the items? Thank you

@BuildingWithBubble 3 месяца назад

Yes, on your destination page that displays all the items, you could add a condition to your repeating group element. Within the condition, you could recognise when the page parameter is empty. When this si true, just have the repeating group search for all of the items in your database. Hope this helps!

@agentesdoreino3928 2 года назад

Thanks for another great video, I have learned a lot from you, I would like to take your course but I need to find out how to use a translator because my English is terrible. About this video, how can we make the url cleaner when we send url parameters?

@BuildingWithBubble 2 года назад

Always glad it can help! And have you tried using a browser extension to translate the videos? I know translation can be a problem for students across the world, so I'm looking into finding a solution. Be sure to keep an eye out!

@agentesdoreino3928 2 года назад

@@BuildingWithBubble Do you know any extensions?

@BuildingWithBubble 2 года назад

@@agentesdoreino3928 I'd recommend checking out live captions directly within Chrome. You may not even need an extension to run this: support.google.com/chrome/answer/10538231?hl=en Hope this helps.

@annasuelafritz1583 Год назад

This is fantastic. I have a question, I follow the exact steps you provide and when I press the button, the parameter doesn’t create a long string and doesn’t appear on my next page. I can confirm that the parameter retains the value, but it doesn’t show on my next page. What could cause this? The value is the result of a user search.

@BuildingWithBubble Год назад

Hey, happy to help. I'm under the impression that it'll be the search that's causing the issue. If there's no value that matches the users search, there won't be a value to store in the parameter. If you're certain that there's a value in your database that matches the users search, I'd recommend just double-checking to see if you have any privacy rules that might be restricting who can get access to that data. If you're not familiar with privacy rules, Bubble has a great guide here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-1-meIeBUXPY.html Hope this helps!

@annasuelafritz1583 Год назад

@@BuildingWithBubble thank you so much for the prompt reply! I was able to fix it when I realized that the URL returns only a text value as opposed to a user, which is what I was looking for. I used a popup on the same page as opposed to leaving the page. That seemed to fix the issue. Thank you again!

@BuildingWithBubble Год назад

@@annasuelafritz1583 Glad you got there in the end 🙌

@wealthyman5420 Год назад

Is it possible to send list of things via URl Parameters? To be displayed of a RG on the destination page..

@BuildingWithBubble Год назад

Yes, it is possible 👍

@wealthyman5420 Год назад

@@BuildingWithBubble Oh, tried that like a million times.. Didn't work. I wonder what I'm doing wrong

@BuildingWithBubble Год назад

@@wealthyman5420 What data are you trying to send through in the parameter?

@wealthyman5420 Год назад

@@BuildingWithBubble A list of "items" pulled from a repeating group. (Previous page) I could see the "items" unique ids in the destination page URL. But unable to use the data to run a filter in a repeating group of my destination page. Here's my use case: On my destination page, on a repeating group, I want to do a search for "items" and set a constraint that the Repeating group should only show the list of "items" in the URL. Simply put, I want only the list that I have in my url to populate my repeating group.

@slooptribe Год назад

But what about when you have designed a Single Page App Design and are moving people around through (v=)? Thanks for your help.

@BuildingWithBubble Год назад

Great question. To navigate people between the different hidden groups in a single-page app, you can just use a 'navigation - go to page' workflow. In this workflow, you can send the user to the same index page they're currently viewing, then choose to send a parameter in this event. If the page you're navigating to doesn't change, Bubble won't reload the entire page, instead, it will simply just refresh the data on the page. Hope this helps!

@slooptribe Год назад

@@BuildingWithBubble I watched more of your other videos and they were super helpful, the trouble I'm having now is how to create links for our artist pages that someone who is not logged in can view. Do you have any videos or wisdom to share about that? People in the app are seeing the Artist Individual Pages fine, but when we share the link and you don't have an account or are not signed in, it shows the correct group for the SPA but without any content loaded. (Note: it is correct in the URL and is showing the slug in the url, just no data in the group/page)

@liamkane101 3 месяца назад

I'm sending data via URL params and works great, but Bubble wants me to fix the "remember to fill out data to send" issue - I understand I can't deploy without fixing this

@BuildingWithBubble 3 месяца назад

I'm under the impression your destination page must have a content type set on it. I'd recommend going to the destination page, then removing this content type. This will resolve the issue.

@liamkane101 3 месяца назад

That was it - thanks!@@BuildingWithBubble

@BuildingWithBubble 3 месяца назад

@@liamkane101 Glad it could help!