Тёмный

How to create a subtabs dashboard layout in Bubble: Dashboard tutorial 2/3 

Matt Neary
Подписаться 19 тыс.
Просмотров 21 тыс.
50% 1

Make sure to watch my simple dashboard tutorial before jumping in to this video: • How to build a simple ...
🎓 For more videos like this, check out my complete Bubble course (45+ hours of lessons) 👉 thinkitbuildit.co
🕐 Timestamps
00:00 - Intro
04:35 - Creating the data structure
07:24 - Creating the interface
12:54 - Visibility logic for subtabs
15:10 - Pushing the subtab path into url
18:26 - Creating a default subtab
21:38 - Having our page 'react' to the active subtab

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

 

27 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 56   
@BradleyJH
@BradleyJH Год назад
thanks for showing us what we'll create first, then starting the build. wish more people would do this. great video matt.
@mneary
@mneary Год назад
Thanks Brad! I'm with you, drives me nuts when we don't even know what we're building from the beginning!
@raamasf
@raamasf 2 года назад
Again, thank you for sharing your knowledge!
@mneary
@mneary 2 года назад
My absolute pleasure :)
@mflotron
@mflotron 2 года назад
:append has changed my life! Thanks for this
@mihai62834
@mihai62834 Год назад
great lesson, Matt! thank you! question: in the initial "landing" of a user, he wouldn't know that a certain tab has subtabs, there is nothing showing that; usually there is an arrow icon pointing to the right showing that there is more underneath and when you click that icon, the subtabs section unfolds and the icon changes into an arrow icon pointing downward....
@RussMayor
@RussMayor Год назад
Thanks Matt, very comprehensive. One enhancement I'm trying to implement...What's the trick to enable previously opened subtabs to be automatically closed before making the wanted subtabs visible - so we don't end up with a multitude of open sub-tabs, just the one we clicked on? I've tried every combination of options I can think of but nothing works.
@noumbissistael1470
@noumbissistael1470 4 месяца назад
Thanks, very great video But please how do i make to show a custom content when i click on each subtab with no common content with the parent
@benitohouetognon909
@benitohouetognon909 4 месяца назад
Very informative I learned a lot but I would like to know how can we display groups for each sub-tabs I created the groups and I tried the way you did it with the tabs with the data of the sub-tabs -tabs of course but it doesn't work and also how to make the Team text do a toggle for the subtabs
@Nick-kp7iw
@Nick-kp7iw 2 года назад
Great stuff as always Matt. For mobile, do you typically find expand/collapse, fly-out (pan right) to sub-menus, or builder's choice optimal?
@mneary
@mneary 2 года назад
Those kind of UX decisions are totally dependent on your particular app. But in terms of the engineering, just having one flyout sidemenu with the subtabs as they are is most straightforward. Gunna record a part 3 on making this dashboard responsive so hope that helps.
@hammy9695
@hammy9695 Год назад
On my workflow under When tab click, I get an issue "Go to page dashboard must be the last action in the workflow". That's potentially because now I have 2 Go to Page actions in a single workflow. But I don't see Matt having the same red issue message on his workflow. Can anyone help?
@technology3934
@technology3934 Год назад
I had same issue. Maybe he edited the fix out of vid?
@joshbigney5954
@joshbigney5954 Год назад
I had same issue, delete the first go to page. Broke the nav bar. Undid the delete and it came back. No issue. Hope that helps
@duncanmurtagh6918
@duncanmurtagh6918 Год назад
@matt Can you help us, I am getting this same issue too and Josh's fix didn't work for me. thanks
@johannavanzuiden2450
@johannavanzuiden2450 9 месяцев назад
I love your video! Thank you for all the step-by-step instructions. However, I have followed all the step by step and double-checked it all. But the condition is not working properly for me. I am not getting the background color and the font color to change. Can you possibly assist me with this? Thank you
@CoreAspect
@CoreAspect Год назад
Thanks for the vid Matt, Something I came across which didnt work for me was spaces in the menu names and then matching Display to the 'Get path from page URL' - they were not recognised. E.g Menu item display: General items Page path: General%20items To overcome this I think I will create a separate attribute on the option set for the URL eg: 'Url path' and then use this for both the URL path in workflows and to match against. One other thing that I am working through is I have multiple option set lists for each item in the parent menu. This is because I needed some separation for organisation of long lists. You need to create constraints on each of these to the individual options sets you want to reference
@mneary
@mneary Год назад
Hey Stuart, yup if your tab labels need spaces that's the way to do it. Bubble will otherwise automatically 'URL code' the parameter, replacing characters that aren't valid for the URL (like spaces).
@QasimMalik-bj9il
@QasimMalik-bj9il 9 месяцев назад
what is the way to solve this problem ? I am also having a space issue.@@mneary
@Eachouse-rm9uz
@Eachouse-rm9uz 4 месяца назад
@@mneary Can you give an example of what the conditions would look like to display and highlight the subtab in this case where space is applicable. At the moment I am experimenting with ---> Get data from URL(Path Segment list - Dashboard subtabs): Last item's URL Path (attribute set with subtab name Purchase Orders. /Products-(Main Category)/PurchaseOrders as set in the option set) is current cell's dashboard subtab's URL path. but it doesn't seem to work
@konradgasiorek1227
@konradgasiorek1227 2 месяца назад
Hi. What if you need something like 5 levels of url subtabs. Ex: dashboard/customers/detailsview/fullview. Would you add more option sets in subtabs or add subsubtabs in the options? How would you go about a bigger hierarchy essentially
@user-ts2pj3ll8z
@user-ts2pj3ll8z 10 месяцев назад
its hidden and then opens but when clicked off the items erase but the space does not collapse
@theimperfectcreator
@theimperfectcreator Год назад
Your Bubble videos are spectacular, mate. Quick question: In the original dashboard video, you showed how to get the page content to change when clicking on a sidebar button. How would you go about displaying the content for these subtabs? I tried, but can't figure it out. Thanks so much for being awesome, Matt.
@fabianocardoso7537
@fabianocardoso7537 Год назад
Hey, @Bill Follow the Paths! 😅 You can find the answer in 21:38 Ok? Thanks @Matt for the video!
@mneary
@mneary Год назад
Thanks Fabiano! Yes Bill the answer is there in the link above though maybe not 100% clear. Just use the same condition we use to format the subtab elements to display the subtab content groups.
@theimperfectcreator
@theimperfectcreator Год назад
@@mneary Thanks, mate! I’ll go back and give it a go. Appreciate it!
@felixotienoodhiambo1232
@felixotienoodhiambo1232 Год назад
Hallo @@theimperfectcreator, I am stuck exactly where you were, displaying sub menu content. Did you figure it out brother?
@felixotienoodhiambo1232
@felixotienoodhiambo1232 Год назад
Bill-I figured out the first question; Get data from page URL-Path Segment List-Sub Menu Option Set-Contains the name of sub-menu option set the group should be visible.
@felixotienoodhiambo1232
@felixotienoodhiambo1232 Год назад
Wonderful video Matt, you are quite a teacher. I have two questions I kindly need help with; 1. I am having trouble setting conditions to display contents on the subtabs. I have tried but you cannot seem to hack it. 2. How to turn off conditions that show the Main menu has been clicked when I click the sub tabs-for a cleaner UI. Instead of having both the main and submenu highlighted.
@felixotienoodhiambo1232
@felixotienoodhiambo1232 Год назад
I figured out the first question; Get data from page URL-Path Segment List-Sub Menu Option Set-Contains the name of sub-menu option set the group should be visible.
@Gamerz-ph2lw
@Gamerz-ph2lw Год назад
@@felixotienoodhiambo1232 this answer needs to be broken down a little more seeing as you can follow these steps perfectly and still not see any content displayed
@zone4528
@zone4528 8 месяцев назад
Hi Matt, You're videos are awesome....thankyou. I've followed your set up her but in the click tabs workflow where you have 2 'go to' (navigation) actions I get an issue show up that says the first 'go to' action needs to be the last action in that workflow. Because of the issue I can't deploy this. Any advise?
@blankblank3134
@blankblank3134 6 месяцев назад
I am also facing same issue
@Agbonlahorbright
@Agbonlahorbright 2 года назад
Thanks for this again Matt! Do you have any tutorials before this on dashboard please? I'd appreciate if you can point me to it
@mneary
@mneary 2 года назад
Yes link in description!
@Agbonlahorbright
@Agbonlahorbright 2 года назад
@@mneary thanks
@jacoblange6715
@jacoblange6715 2 года назад
Firstly, I love watching your videos! Finally subscribed to your channel! Secondly, is it possible to have sub tabs be a list of a certain collection in my database? Example… tab “Clasrooms” and sub tabs are a list of all classrooms the user currently has. Then I can pull page URL to show whatever classroom the user selected.
@mneary
@mneary 2 года назад
Yeah absolutely. Just set the data source of the nested RG to be classrooms. In that case easiest setup for you might be to add your tabs as individual groups (rather than via RG cells) so you have full control over each subtab list, given that the types of subtab will be different for each tab.
@jacoblange6715
@jacoblange6715 2 года назад
@@mneary ok that’s sounds good! I actually decided, since I’m using this on a dashboard page, to use option sets and once the classroom tab is clicked display a list of classroom within the page data. To keep the dashboard feel and have more control of my option sets. Thank you for your insight!
@mflotron
@mflotron 2 года назад
24:00 would it get confused if you had both a Tab and Subtab Option Set that were named identically? How does Bubble know what type that path segment is?
@mneary
@mneary 2 года назад
Behind the scenes bubble will be able to differentiate them. But there is no reason for naming two option sets the same.
@mflotron
@mflotron 2 года назад
@@mneary I mis-typed a bit. I meant 2 Options Sets each with an Option that has the same display text.
@mneary
@mneary 2 года назад
@@mflotron that should also be fine I think, since Bubble is not only using the display text to identify the option but also which option set it belongs to. So they should be treated as unique. But worth testing out to make sure!
@MultiVigarista
@MultiVigarista 2 года назад
By the end of the video I think my head just exploded 😂😂
@mneary
@mneary 2 года назад
In a good way? Did it make sense?
@MultiVigarista
@MultiVigarista 2 года назад
@@mneary Definitely in a good way, you're a great teacher! I'll be buying your course soon :D
@onkarmundada951
@onkarmundada951 Год назад
My submenu name have two words “Create Customer” now in url its encoding when i am trying conditional formatting its failing is there a way to decode url ?????
@mneary
@mneary Год назад
Use a different value for display and path. With path keep it one word (i.e. Create Customer & create-customer)
@onkarmundada951
@onkarmundada951 Год назад
@@mneary May i know how to do this ?
@onkarmundada951
@onkarmundada951 Год назад
@@mneary Thanks man got it i have created two attribute in option set one as display and another as path now everything working. Just another question is there a way we cand add icons to tabs and sub tabs that would be awesome
@mneary
@mneary Год назад
@@onkarmundada951 yes you can save an image, add svg text and render through html element, or use a plugin like feather icons or hero icons and use the option set attribute to dynamically set the icon
@kayb688
@kayb688 2 года назад
I cant seem to find the setting that removed the lines dividers in the menu, I see you had a pre-set already?
@mneary
@mneary 2 года назад
Yeah I had a pre-set style. You simply set the repeating group separator to be 'none'.
@kayb688
@kayb688 2 года назад
@@mneary ah ok great thanks! Great vid bro
@nvshurygin
@nvshurygin Год назад
yt
Далее
How data moves through your app - for Bubble beginners
31:26
NOOOOO 😂😂😂
00:15
Просмотров 2,2 млн
СЛУЧАЙ В ЧЕРНОБЫЛЕ😰#shorts
00:19
Просмотров 203 тыс.
How to Use Custom States in Bubble.io
33:17
Просмотров 16 тыс.
Good database design in Bubble
21:35
Просмотров 40 тыс.
Bubble Responsive Design Crash Course
1:11:11
Просмотров 70 тыс.
I've been using Redis wrong this whole time...
20:53
Просмотров 343 тыс.
If __name__ == "__main__" for Python Developers
8:47
Просмотров 389 тыс.