Create the UI and navigation logic for a simple dashboard that you can then customize for your unique app. 🎓 My definitive Bubble course (43+ lessons and counting, 18+ hours.) 👉 thinkitbuildit.co
Just finished watching all three parts and they have been extremely helpful! My bubble knowledge and understanding has increased significantly due to your channel, thanks Matt!!
This was my first bubble build and looks fabulous. Thanks heaps for the tutorial. I feel like I would have hard wired this type of menu without this and would have had way more work in future.
Hello Matt! Thanks for the great tutorial. I noticed a slight problem. If you put the option set two words example (B2B Buyers) for navigation in the menu, then I think it's a bug in the path, because it doesn't display the desired group with the same name B2B Buyers, because the characters %20% appear in the navigation.
Very cool, I'm Brazilian and I had to watch it with subtitles, but everything went well. Great tutorial, I will continue watching the next videos. Congratulations
Hi, if you find yourself stuck at the %20 in the URL here's what you do. 1. Go in your option set and name each tab with a different special character. I personaly used "-" and "_" (I only had 2, the other ones I could remove a word. You have to choose your battles lol) 2. Go into "Text Current cell's dashb" and add a condition for each and every tab because the condition will allow you to replace the word that "contains" the special character (and not only the special character by itself) 3. The conditions should be "Current cell's dashboard tab's Display -" Then it enter (the - will automatically become "-"). Then "select property to change..." and select Text. 4. In the text box, type the whole word with the space instead of the "-" or "_". Note: If you don't use a different special character in multiple different tabs, then your condition (which applies to all tabs) with change every tab that contains the special character and replace it all by the word you typed in step 4. Okay now go and build that idea like i'm doing right now.
Another way to do it is just to name the option set "Hworld" then add a condition to the text itself when the option set is Hworld, then text is Hello World everything will work as the video after that
What do I do if I want tabs with more than 1 word in the name? cause all these options are based in identifying the name in the url, but if I use a name with spaces, the url appars with %20 characters instead of spaces, so it breaks everything:(
hello matt, I created the dash board the first time around and it works perfectly! I tried to clone this dashboard and changed everything in a different set but for some reason when I click team or activity it won't send that data to the url.
Hi Matt, Great course! Thanks for that. I used it for a bookclub app. But I can't seem to get de full calendar (Bubble plugin) to work. Ik have a workflow setup to open a popup on When a day is clicked but it doesn't work. On debug mode it shows that the group Main is clicked instead of the calendar day.. Any suggestions?
Thanks Matt, great vid! I have been following this approach but I can't find a way to make the display of each page content scroll/reset to the top of the page each time. I'm sure its something simple!?
Great video! Quick question: Am I correct in assuming that any information stored within each tab (e.g., Dashboard, Team, Project, Reports) will be vulnerable / unprotected because the tabs are option sets? Would it still be possible to hide certain information within the tabs if the information are data types as opposed to option sets despite the tabs themselves being option sets? Just want to make sure this setup would still allow me to protect sensitive information. Thanks in advance!
Hey Matt is there any way that I could replace %20 which I am receiving in my title like "Add Vehicle" and it changes to "Add%20Vehicle". Or may be do you have any tutorial how could the Titles append from URL's without special characters?
how do you link from another page to show a specific tab's content from another page? Say you wanted to link to the dashboard but show the Team-tab information?
very helpful! TY for sharing. I'm new to all this. Is bubble doing a "serve it all then display as needed" type architecture similar to React? Or is each click to get a path do a hit on the web server?
Is it possible to achieve the same outcome by defining a custom state for each click of a menu item and add a condition to show a particular group's content if the custom state changes???
Thanks for the video! Unfortunately, when I add the path (through get a page url) instead of the name of the path different symbols (%D0 ect) are displayed. The issue is in Cyrillic letters, how it can be fixed?
Howdy, need some help. I got to 22:00 and The main page is looking good, but when I click on the tabs the groups don't appear. For example, if I click on the Team tab the floating group on the left will show but the main content area will be blank. Any thoughts?
I have created a simple app with a single page and a few pop up menus. Is it possible to create a dashboard with a floating menu system and then insert my original app into one of the pages the dashboard. So I can expand the app by easily adding on about us page, login etc
Another question, how do I get the person to see those contents? At least I have a part of creating an order, that those data have to go to data, how would that be?
Hey Matt, super helpful video thank you! Bubble isn't allowing me to choose "Current Cell's Dashboard_Tab's Display" for the workflow; has something changed with this functionality?
I appreciate your teachings, but I have encountered a problem. I would be grateful if you could guide me. I have set the tabs of my dashboard, but when I type a two-word phrase, it uses "%" instead of a space. How can I solve this issue?
Why push the selection value to the page's url instead of having a custom state (type = tab option set) for the page and basing your show / hide logic on that ?
Hey Matt, love your tutorials. One question about the dashboard names. In my dashboard I have more than one word within the side nav. There are some complications when I conduct your 'get path' process as the URL does some weird formatting with spacing ie. "%/". How have you overcome this issue?
Hi, yeah I had the same issue, it’s a pretty easy fix actually. If you go to conditional and add a condition: when current cells tab’s display contains “_” show: the text you do want. If you have multiple words with spaces I suggest using different signs (&/@/~)
I also can't get the conditional logic. You have options I don't get. So to do the clicked state you have get url's path then current cells "dashboard Tabs". That part doesn't exist for me.
Awesome video... Is it possible to have the tab headings highlight when the user hovers their pointer over them, or is that only possible with actual buttons (as opposed to option sets)?
Hi Matt 👋🏾 Great course as always 👏 Been following you since I began Airdev’s Nocode Bootcamp. 😜 If you ever wonder what tutorial or course to build next, here’s a tip. There are thousands of bubblers out there (like me 😁) living in countries that stripe doesn’t support. But an alternative exists, that is more “global” than Stripe, namely Flutterwave!!! Why not making a course or tutorial on how to implement this payment solution that is an alternative to Stripe? Think about it 😇
Thanks for the tutorial, Matt. Very helpful! One small question though: Is it possible to have collapsible subcategories for each category on the side bar?
Yeah absolutely! You just nest another RG inside the cell of your categories RG which holds the subcategories. There's a few ways to create the subcategories but I would probably create them as separate option set (categories-sub) which you then link to the corresponding category option via a 'list of subcategories' field. Then you set your url to be app.com/page/category/subcategory.
@@mneary Hi Matt, I created the new option set as described for subcategories and linked them to each category via a "list of categories." However, I am struggling to get the proper logic. At this moment I have the workflow set to "Current cell's Subcategory_tab's Display" The Conditional is literally the same as the Category "Get path from page URL is Current cell's Subcategory_tabs" However, the URL does not change for the subcategories when clicked. Any ideas why?
@@highlanddream7815 I have a tutorial recorded on how to set this up which I'll be releasing in a few days. What I would check in the meantime is the 'type of data' for the path in your 'get data from URL) expression. Make sure it's set to subtab, not tab.
Darn it. Got stuck at the "add groups" section. In preview, when I click through the tabs, they are not changing colour. And in edit mode, I will change a tabs colour and then go to change another tabs colour... and all tabs are one colour now. Any idea whats happened? Great tutorials btw! Subbed!
Just to show the navigation system at it's most basic. Best practice is indeed to encapsulate everything inside reusables. Gunna do a new video showing this soon.
hi! thanks for video. I am not sure whether it's efficient to use dynamic data for menu tabs and core pages. isn't it putting unnecessary strain on the database?
Good question! Yes, if you use the database. But if you use option sets those are available to the browser on page load so all the computation is happening client-side.
Hello, great videos. is there a way to have this dashboard for multiple clients? I.e the homepage has a list of all my clients and then when i click a client i get the dashboard unique to each client? all tabs and subtabs are unique to each client? when trying to do it i have to change page content and then i get loads of errors and the uniquie ID in the URL is after the tab URL when it should be before?
How is that simpler than few html elements + a bit of css? Literally flex or grid container with two divs on left col logo + ul with li and a tags. On right H1 for section heading.
Hi Everyone, For those who are having issues with 20% in the URL here's what I did: - I added another attribute "URL" in my menu-tabs option set, - copied the URL with 20% and pasted it in corresponding option's URL attribute. ( or replaced the space between words with 20%) - Matched the current URL with my current's cell menu-tab's URL hence the condition was true and I was able to make changes to the current cell for example displaying bold text, background color to show the active tab. P.s : It might not be the best solutions, but it worked for me. Cheers! Happy Bubbling ^_^
@@alexsij9698 Sure, 1 -> I have created option set "Admin_Settings_Tabs". 2 -> I created a new attribute "URL" for the above option set. 3 -> I created a new option "Brand Settings" 4 -> I then modified the "Brand Settings" option and added "Brand%20Settings" in the URL attribute. Now, 5 - > on the content group I wanted to display when clicked on Brand settings tab, I have applied the following condition: When Get path from URL is "Brand%20Settings" ( this was set in step 4 in options sets) This page is visible (true). Done (Repeat this for other options) I hope this easy enough to follow now.
Hi, thanks for this tutorial. I encountered a problem following the tutorial. The tab pages aren't stacked on top of one another. they are appearing below one another. How do i fix this?
I have a question regarding pubble, can i add dynamic API? Because I want build app that will integrate with e-commerce platform, and this e-commerce only to integrate with the just through API connection. But API connection only provide one space for only API. In other hand, This e-commerce platform will give their own customer access token in each customer. My question is that how can I have each customer his own data pace, the access token will allow me to change or modify any thing in their store
Yes Bubble can connect with APIs (see manual.bubble.io/core-resources/bubble-made-plugins/api-connector). Sounds like in your case you want to access user accounts on the third-party platform. They should have documentation explaining how to get authorization from those users to make those changes (OAuth most commonly).
Hi Matt, would really appreciate it if you could list the steps to making this responsive. It seems that the main group is not collapsing under the floating group? How do I fix this for mobile view?
Heya, change the margin of your sidebar and main group conditionally at your breakpoints to change their position. For sidebar use negative margin, equal to sidebar width (i.e -320) to move it off screen on mobile.
Hey Matt, I am trying to build a simple leaderboard that tracks how many classes my students take and gives the a snip shot of how they rank with each other.I played around with the app data functionality but was not able to get bubble to accept the xlx file I was using (even after ensuring the formatting was the same). Any tip on solving this problem? Happy to send you some $$ for your consultation too
Hello, can you already give information when your Bubble course will be available, how extensive it will be (hours) and approximately what it will cost? Thanks in advance.
Hey - yep so planning to release an early access version by May 31st. That will consist of roughly 14 hours of videos for $60. The final version of the course will be about 30 hours for $95. It's worth noting that about 1/3 of the content are lectures introducing new concepts, while the remaining 2/3 are walkthroughs building stuff with those concepts. Hope to see you in the course!
@@mneary Hi Matt, can you make an offer for the people who love your content the most, You can say like "If you get my course in the first 6 hours you will get a FREE access to the final version", It's up to you, just a thought.😅❤️ By the way matt, I want to know what do you do for a living, because I want to change my career to no code development, and I don't know where to start?
@@ibrahimgamal6774 oh yes, to clarify, if you get the early access version that’s lifetime access, so you’ll get the additional videos included when they’re released! Send me an email about the career stuff - www.mattneary.co
I wrote 40 and 80 hours respectively above. I don't know how I got there. I meant 14 and 30 hours. 80 hours for a course is ludicrous. Even 30 is borderline ridiculous.
Thank you for the video lesson. however when the option set name is two words the URL is space is formatted with % and doesn't match the tab. how can this be fixed, please?
Add a hyphen where you have a space. You can't have spaces in URLs so it automatically gets formatted to be URL friendly. See www.w3schools.com/tags/ref_urlencode.asp
@@mneary I've put a hyphen between the two words in the option set but now it's the hyphen is included on my tab buttons as well. I Obviously don't want to display the hyphen in my tabs. How do I remove the hyphen from the display?
Same problem here. I've even tried to add "Find and Replace" instead of the "is" to replace the %20 with Space before it's compared to the Text of the Dashboard Tabs and then i've added the "is" afterwards which should, in theory, work... But it doesn't
Does it mean that ALL the pages we have in the dashboard will load when we go to the website? What if we have a ton of charts, buttons, bells, and whistles? Wouldn't it load slow? How can we implement proper pagination?
Bubble doesn't load everything at once. For hidden elements some of the computing is differed until they are actually shown. But if there is a slow load you can always hide it behind a loading indicator. Once everything is loaded the page is much snappier than having things on separate pages.
@@mneary very interesting. by chance, do you know how this "different" computing is done? I am a web developer and i am interested a bit about the technical side of things. I am researching if bubble can be used as a content management system(internal app) for a website like facebook (social network) with tons of charts, export, table sorting and filtering, crud, conditional form inputs, permissions and permissions management and others. Basically, the backend things of a social network kind of app
@@ionelCristianLupu_ , with the disclaimer that I'm not an expert on any of this, what I do know is that the entire HTML, including hidden elements, is generated by Bubble on the server, but the hidden elements aren't ''painted' until they become visible - this however I believe is the way the browser rendering engine works, not a Bubble-side optimization. So if you have a bunch of hidden elements, there still might be a bit of a load delay as the DOM is constructed. But that would be expected with any complex, single-page web app, and can be dealt with by hiding the delay behind a loading indicator. The other thing to note is that if hidden elements are referencing data then that data won't be fetched until the element becomes visible. So if you've got lots of charts and things that data won't necessarily need to load until they are visible. Another trick is you can load data in hidden containers-groups and repeating groups-organised in a popup you never show to the user. Those containers act as variables, and just pull the data out client-side when it's needed. To dive deeper into all this I'd recommend reading: - This page on performance by Bubble: manual.bubble.io/help-guides/optimizing-an-application/performance-and-scaling - This book on Bubble performance: amliesolutions.gumroad.com/l/the-ultimate-guide-to-bubble-performance
@@boxingshorts9628 Make the min-width of what 320? The Main page is what is giving difficulty to be responsive as the area under the floating sidebar does not seem to shrink as the menu disappears.
@@highlanddream7815 yeah you would have to make different breakpoints and change the left margin with each breakpoint. I like to do breaks at 1280 - 1024 - 768 - 640 depending what type of website i am making. But for dashboard designs if you only have 2 columns then just add less breakpoints. at 768 or 640 should be good enough.
Few reasons: - User can click browser back button to go to previous tab/view - You can navigate to a specific tab from a different URL - Matches native navigation structure, making easy to maintain
Thanks for that Matt, I just looking at a complete overhaul of my dashboard set up and you have now put a spanner in the works as I was set on custom states before 😂
