Тёмный

How to Use Custom States in Bubble.io 

Building With Bubble
Подписаться 22 тыс.
Просмотров 16 тыс.
50% 1

In this tutorial, I'll cover everything you need to know about using custom states within Bubble. Using three practical examples, I walk you through the ins and outs of mastering states for your application.
Custom states are a powerful way to temporarily store data or a value on a page, all without having to touch your database. This temporary value can be used for changing the behavior of elements, or even displaying data.
In this tutorial, I cover:
1. What are custom states and when you should use them
2. How to use custom states to create a dark mode feature
3. How to use custom states to create a navigation menu
4. How to store data in a custom state, then pass this onto the database
After watching this tutorial, you'll not only understand the essential concepts of custom states, but you'll also have a clear understanding of how to implement them into your own Bubble app.
---
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 - Custom states overview
01:45 - Dark mode state
13:08 - Page navigation state
21:39 - Storing data in custom states
32:41 - Additional insights

Наука

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

 

28 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 51   
@sovereign797
@sovereign797 2 года назад
You are a really good bubble tutorial creator. So much better than many others I have seen. Detail, pace, narration of what you are doing and explaining reasoning behind what you are doing are all so clear. Very well done.
@BuildingWithBubble
@BuildingWithBubble 2 года назад
Always appreciate it 🙏 I remember how challenging it was for me to learn Bubble, so I try and explain things using terms even I could understand if I had to start from scratch.
@friends.with.fishes
@friends.with.fishes Год назад
I've watched so many tutorials on this subject and your video finally made it click! Thank you
@BuildingWithBubble
@BuildingWithBubble Год назад
Glad it could help! Custom states were definitely a tough concept to grasp when I first started in Bubble. Once you understand a few basic concepts, you can quickly see how powerful they are 🙌
@kevlc
@kevlc Год назад
Hey! this is only to thank you for your videos . The content and pace while explaining is the best i've found here in youtube ,thanks for this type of content !
@BuildingWithBubble
@BuildingWithBubble Год назад
My pleasure! I genuinely appreciate it
@heyitsjelani
@heyitsjelani 2 года назад
Great video, thank you
@BuildingWithBubble
@BuildingWithBubble 2 года назад
Thanks ✌️
@rafebrena
@rafebrena 2 года назад
Great video! I first browsed the Bubble Academy videos, but found no clear explanation of the last use case (how to transfer info from the custom states to the database). Thanks!
@BuildingWithBubble
@BuildingWithBubble 2 года назад
Glad this could help! Temporarily storing a list of data within a state is by far one of my most common use cases for custom states 👌
@kevinsloan5805
@kevinsloan5805 2 года назад
Great video!
@BuildingWithBubble
@BuildingWithBubble 2 года назад
Glad it could help ✌
@desynchronisatio
@desynchronisatio 6 месяцев назад
many thanks
@BuildingWithBubble
@BuildingWithBubble 6 месяцев назад
My pleasure!
@jirizboril1517
@jirizboril1517 2 года назад
Thank you so much
@BuildingWithBubble
@BuildingWithBubble 2 года назад
My pleasure 👏
@arijitbhattacharjee7773
@arijitbhattacharjee7773 Год назад
Excellent tutoring skills....precise, clear and well paced..
@BuildingWithBubble
@BuildingWithBubble Год назад
Really appreciate it Arijit 🙏 I try to spend too much time on unnecessary fluff
@arijitbhattacharjee7773
@arijitbhattacharjee7773 Год назад
@@BuildingWithBubble This helped me sort out my problem in minutes, when I was running around in forums trying to find a solution... do you have something on drag and drop capability as well? I am in urgent need of some tips there
@BuildingWithBubble
@BuildingWithBubble Год назад
@@arijitbhattacharjee7773 Awesome to hear 🙌 And unfortunately I don't at this point in time. It's already on my to-do list though!
@jirizboril1517
@jirizboril1517 2 года назад
Thank you
@BuildingWithBubble
@BuildingWithBubble 2 года назад
My pleasure ✌
@WalkUsThrough
@WalkUsThrough Год назад
I just love your videos! Do you have a video on how users can set their own default state eg dark or light mode? Thanks👍
@BuildingWithBubble
@BuildingWithBubble Год назад
Thanks! And if you watch from 1:45 in this tutorial, I cover exactly how to do this: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_khNXo9rLmA.html Hope it helps!
@DJPapzin
@DJPapzin Год назад
This is a great tutorial, easy to follow. I get stuck at the end, the search box doesn't display any users and everything in my database is there.
@BuildingWithBubble
@BuildingWithBubble Год назад
Glad it could help! I'm under the impression that the issue you're having is due to a privacy setting set on your user data type. This is a relatively new feature Bubble has introduced, but it's easily manageable. I'd recommend watching over this tutorial here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-1-meIeBUXPY.html Hope this helps!
@DJPapzin
@DJPapzin Год назад
@@BuildingWithBubble Thank you, this solved my issue.
@BuildingWithBubble
@BuildingWithBubble Год назад
@@DJPapzin Awesome to hear!
@alexmarinez5730
@alexmarinez5730 2 года назад
Now that flexbox is the default editor, how do you get the forms to move up once the other is collapsed like you did from 18:50 - 18:56? Have been learning a ton from all your vids, thanks!
@BuildingWithBubble
@BuildingWithBubble 2 года назад
Great question! The process is much the same, even with the new Flexbox engine. Start by setting the page layout to be a column (stacking elements vertically ontop of each other). From here, you can add two groups ontop of one another. Like I mention in the tutorial, take the time to make both groups not visible when the page is loaded, then also select the 'collapse element when hidden' option. Now, build the states like I'd done within this tutorial. Let me know if this helps 👌
@alexmarinez5730
@alexmarinez5730 2 года назад
@@BuildingWithBubble Yes sir that was it, thank you! Also since I had the profile settings and business settings just as text fields they stacked after changing the page layout to column. Quick fix for anyone else that happens to is to add them to their own group above the forms so that you can return them to side by side like shown in the tutorial.
@markdasihit6036
@markdasihit6036 Год назад
For the second use case, can i use the "hide element" and "show element" workflow instead? Thank you for all that you do ❤
@BuildingWithBubble
@BuildingWithBubble Год назад
Appreciate it! And great question. Yes, it'd be possible to use the hide/show element workflows, but if you have a menu with several options, it might become difficult to maintain all of the groups you need to hide.
@markdasihit6036
@markdasihit6036 Год назад
@@BuildingWithBubble thank you for clarifying that. I am grateful. I've been following your tutorials for a while now, and now I can hardly keep up with anyone else's. I've gotten so used to you. I'm looking forward to purchasing one of your paid courses soon. Thank you again
@BuildingWithBubble
@BuildingWithBubble Год назад
@@markdasihit6036 Awesome to hear. I genuinely appreciate it 🙏
@businessacc179
@businessacc179 6 месяцев назад
Came here to ask this, thank you for beating me to it! And thanks to @buildingwithbubble for responding to new comments on older videos 👏🏻🙌🏻
@user-mv9ij6cx7z
@user-mv9ij6cx7z 7 месяцев назад
hey sir.... i have een having a problem maintaining a state when a page is reloaded... i have a countdown timer on a tab.. but when a page is refreshed the timer starts all over again.. do you have any videos that provided solution to this ???
@BuildingWithBubble
@BuildingWithBubble 7 месяцев назад
Unfortunately, the downside to using custom states is that they automatically refresh when a user loads/reloads a page. If you need something to be persistently store a value, you should look at storing it as a field within your database.
@priyanwrites
@priyanwrites Год назад
I have three combination of log in . One is job seeker and another is Recruiters. So before tapping sign up button they should select which category they belong to. Based on the category, the next page will be shown How to do this in bubble io
@BuildingWithBubble
@BuildingWithBubble Год назад
Happy to help. I cover how to build something similar in my Uber clone tutorial. Throughout the video, I explain how users can register as drivers or riders, then be redirected to their relevant pages. You can watch the section of the tutorial here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Cc0X4esd32c.html
@SaulBurgos
@SaulBurgos Год назад
I have a doubt. How can I save a "custom state" list of a "custom data type" into database? let me explain it. I have a custom state list called "my_hobbies", the type of this custom state is a "custom data type" that has the fields : "name, description, image, date". I have a form with all the fields with a button "save". what I want to do is: when the save button is clicked I want to add a new item to my custom state "my_hobbies". later when I have more than 5 items on my list.... I wan to saved this list on the database. I only see basic examples, using text type for the custom states. Do you have a video with that flow?
@BuildingWithBubble
@BuildingWithBubble Год назад
Great question. If you have a state storing a list of "my_hobbies", it will only allow you to store a complete "hobby" that already exists - not create a new hobby on the fly. As an alternative, you could create 5 different custom states for each of the fields you'd like to store within each hobby (e.g. name, image, etc). Set the type of each state to be the same as the data field type in your database. e.g. name = text and image = image. When a user has added the information of 5 items, you could build a workflow to create a new "my_hobby" entry in your database. Here, you'll use the values stored in your custom state. After a new entry is created in your database, you could also create another state on the page that stores a list of "my_hobbies". You could then add the newly created hobby to this list. Hope this helps!
@SaulBurgos
@SaulBurgos Год назад
@@BuildingWithBubble Really? oh god.. ok. thanks for your answer... an excellent channel to learn.
@SaulBurgos
@SaulBurgos Год назад
@@BuildingWithBubble in the forum of bubble I saw this recommendation using a custom state of the type text "Count the number of elements of your list and create a recursive (schedule a workflow) function to insert element by element." What do you think? I am not sure who to do that but it seem that could work
@thewise8592
@thewise8592 11 месяцев назад
how to build a delivery food app using only components?
@BuildingWithBubble
@BuildingWithBubble 11 месяцев назад
I just released a tutorial that covers how to build a food delivery app like Uber Etas here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-crf8wZYqm28.html I'd recommend checking it out!
@thewise8592
@thewise8592 11 месяцев назад
@@BuildingWithBubble thx
@AmitChauhan-fz9qj
@AmitChauhan-fz9qj Год назад
How to use custom states in a repeating group?
@BuildingWithBubble
@BuildingWithBubble Год назад
Are you looking to set a unique state for each individual repeating group cell?
@AmitChauhan-fz9qj
@AmitChauhan-fz9qj Год назад
@@BuildingWithBubble Thank you for your reply. Yes, so I am building a form builder. I have created 6 form elements e.g. free text, single choice, etc. inside a floating group. I have created a repeating group but forms are not popping up. I want unique forms to appear in a repeating group cell as you mentioned.
@AmitChauhan-fz9qj
@AmitChauhan-fz9qj Год назад
Your thoughts, please
Далее
How to Use Option Sets in Bubble.io
19:23
Просмотров 10 тыс.
Kettim gul opkegani😋
00:37
Просмотров 1,1 млн
Fast and Furious: New Zealand 🚗
00:29
Просмотров 15 млн
The Complete Guide To Using Line Charts In Bubble.io
49:40
How and When to Use Custom States in Bubble.io?
22:13
Просмотров 2,8 тыс.
How to Build a Signup & Login Feature in Bubble.io
22:18
Create a User Invite Feature in Bubble.io
30:37
Просмотров 3,4 тыс.
The Complete Guide To Using Bar Charts In Bubble.io
39:42
Getting Started With Bubble - Key Concepts
58:32
Просмотров 168 тыс.
Multiple Languages in Bubble.io - 3 Different Methods
34:10
How to Build a Sign Up Form in Bubble.io
44:46
Просмотров 9 тыс.
Database Design with Bubble.io
28:33
Просмотров 3,6 тыс.
How to Soldering wire in Factory ?
0:10
Просмотров 4,8 млн