How To Build a Dashboard | Bubble.io Tutorial

how's it going guys my name is Max and in today's video I'm going to show you how to build this clean dashboard in bubble.io with navigation using URL parameters as well as this floating sidebar so let's get straight into it so the first thing I do before I build any project for a client or my personal use is I hop into figma right why let's let let's take a look so I have this um template for setting Styles why is that we have color color palette font palette and then I have like a dashboard layout uh in terms of colors first off if you have set colors before you start building uh you're going to be way faster if you did not set them right that's one thing and the other thing is for SEO optimization a great platform or website is UIC colors. app going to link it down in the description but let's say you you know pick a color that you like and you want it to be for example a primary color just set this and it's going to give you all like the contrast grit uh and that way uh your website your app is going to be optimized for SEO uh because if you have like a blue color and then uh yellow red like it's not optimized right also if you don't have your Styles you would have to kind of go back and and match them it's a little bit messy so before before anything happens in bubble this is the first thing I do so I'm going to link this um template in the description if you if you like to check it out then I have my fonts self-explanatory right heading one two three uh body small large honestly this is you know it stays how it is uh the only thing I have to do is to you know um take the and and choose the the style of the text right such as Poppins I use Poppins a lot a lot of people hate on it but I like it and then I have a dashboard layout uh if I want to you know just sketch up a couple of things uh to know exactly what I'm building U but yeah so yeah let's hop into bubble and I'm going to show you quickly before we go in um styles this is how I use it um you're free to um duplicate or you know copy me this is what I use and helps me a lot um yeah so let's get into it so the first thing obviously add a new page let's call it dashboard tutorial hit create let's adjust the view for 90% And so the page size so let's go to layout let's set it to colume I always do 1,400 1,400 and 992 992 is the maximum height that you know a computer is going to have or like a screen um and same with 1400 I mean you could get away with 1,00 but I think, 1400 is you know I i' like to have a little extra space so the first thing we're going to do is to create the sidebar right so go scroll down take floating group put it on the page floating group is going to again be colume in terms of the sidebar I always do either 280 pixels or 300 it really depends on the day honestly uh and then uh no fit WID to cont fit height to content and remove the main height let's call it the sidebar okay in terms of padding I do on the top I do 32 on the bottom 32 and on the side 101 let's just use a border so we know no so we know exactly where the sidebar is uh let's do with right solid okay you see it awesome so yeah uh let's go you take your um logo this is the first thing I start with the logo right so let's take an image I got my logo right here let's keep the aspect ratio one to one and let's do like 50 pixels awesome 50 pixels uh you don't have to name everything but I do in case um I I just don't want to get lost uh when I'm trying to find a specific element let's grab a text this company name right we don't have any company name let's and again you see when you have your style set up you don't have to kind of guess and then look back you know what you selected you have it right here and if you want to quickly just adjust it you can do it here right simple as that um for this Let's do let's do 18 pixels let's do bolt yeah let's do bolt um remove the Min height and the Min width and let's take yeah let's keep it at the neutral 900 um now left click hold shift left click right click group elements in row uh now you group them so this is I usually call this group group logo again remove the main height uh I I should probably set that up but either way you're going to do that uh quite frequently um yeah so okay so let's make sure that this aligns it's going to align here same thing with this even though it takes all the space and in terms of the apply Gap spacing let's do six uh five maybe four four is enough awesome now let's create what we have here I'm just going to use this as an example home analytics project CRM settings and the user um so let's to home for plugins um strongly recommend free plugin by Google Google material icons add plug in here Google the icons it's for free and it's going to save you a lot of time so let's grab the icon and let's put home let's make a 900 and for this I usually do 30 by 30 awesome you grab a text uh let's do home again remove M height M width and then I grab let's make this very large but semi Bolt right and again let's take another one let's just use the arrow Arrow let's do the arrow 20 by 20 so it's smaller this um yeah now again left click hold shift left click left click right click row now now when it when it comes to uh this group in a sidebar it usually is for me that the minimum height is 48 pixels um that's what I do um yeah let's Center everything and let's make the apply Gap spacing let's do six about eight let's do eight and let's call it group home and in terms of padding let's do padding 10 10 10 and 10 and let's make around corners I usually do eight I usually do eight we don't see it right now but we will don't worry um when I'm building some you know when I put a group element on the page I always apply Gap spacing at least 24 or 12 pixels so you know it doesn't stick to it um just like my personal tip for you um but yeah we got we got home so let's copy this just duplicate it um and REM rename it so analytics analytics um it's the same thing then we have projects let's do a book I believe which one looks nice um let's do this first let's do people select people and this is going to be settings just rename this to that was CRM awesome so now take these four groups and group them together into column so again left click hold shift select right a come on left click select right click colume now for this apply Gap spacing which is going to be four at least uh let me see let's just do a comparison yeah yeah I believe that's good now right here we have yeah so this group is obviously group home copy let's Analytics let's do the same thing for group projects and group CRM obviously we have group uh settings right so now we group those four together uh let's call it group um container top container and take this group and group it with this right so select left click again right click colume boom apply Gap spacing this is going to be more let's do 12 let's do 12 awesome it seems like it's too big honestly let me see how does it look no let's let's keep it at 30 let's keep it at 30 and now the bottom right so this is just group uh group top and let's take the bottom so now what are we doing right here okay so I want to do this John Smith with his Gmail okay okay okay so the first thing grab text and let's just do John Smith we then can um connect it dynamically but for now let's just use it like this and this is going to be John gmail.com uh let's see make this smaller 14 again remove the main height main width same thing here and group them together this is group name um and email again remove the Min height um and apply Gap spacing let's do two two is enough I believe yeah and now so we group them together H let let let's wait I'm going to show you what I'm going to do after let's grab image again this is going to be just grab this guy to put it here for now again keep the ratio one to one let's do 50 50 is enough and roundness to get a circle like this also yeah doesn't matter does not matter now and lastly let's gr let's take um material icon and this is going to be log out log out and this is going to be 24 by 24 now let's take these groups let's take this let's make sure I'm grabbing the whole thing row so let's make this first okay aome I can remove the main height it's pissing me off and Let's do let's do group profile and let's take this group and do user current user right so now we can oh now we can connect it dynamically parents group user Avatar and let's do I could have done yeah I could do like current user first name space at current user last name now for placeold placeholder same thing here current users email let's make this apply Gap spacing let's do six maybe let's do eight probably 10 proba 10 let's take this group and just align it and same thing here right now the Gap spacing or the padding sorry get padding is going to be let's do 20 at the top let's do 20 at the top and Define each border um independently group top Solid let's make a this does it look nice and now take the settings and this group it together group it together the let's do 12 and now navigate into the sidebar just press this boom it's at the bottom awesome but this does not align meaning that this should have a so aligns nicely with everything great now so we got a sidebar which is awesome let's rename this group bottom and now let's set up the logic um you know to navigate and using URL parameters as well as um yeah I'm I'm going to show you so when this group is hovered so let's set set a let's set a condition when this group is hovered the color ah we don't have a color come on background style set a background style for everyone I'll take the color when this group is hovered the color is going to be let's see what do we have here let's preview this mhm okay okay I like this now when this group is hovered we have to change the color of these elements as well right so let's change that quickly when and now you have to connect to the group right so we named it that's why we named it group home so when group home is hovered this ele this icon color is going to be white right just take this copy paste say same thing here paste however this is not icon this is a text so font boom so if we refresh this going to look something like this again you could do it differently but you know that's how it is I like this yeah I think that's fine that's fine it just proves the point um again yeah so let's do the same thing here analytics um this group is hovered color is did I use this yeah now find group analytics is hovered then color is going to be copy paste paste and just set this color uh primary contrast to neutral right here here crate let's do it for projects as well just to see like how everything looks like uh color then you take when group project is hovered this icon color is going to be primary and neutral 100 copy simply paste paste but color awesome so now we have this logic so now we have this simp simple logic it just adds to you know like the um professionalism I guess when you build in and it looks better right obviously this is just white so if I had different colors such as you know this color palette could look better you know with the green and and black but for now I think it just proves the point um so now let's say we want to navigate to because this is a single page app right let's say we want to navigate to home you would simply grab a group right here put it on the page that's how I name it is nav navigation home layout to layout Min width and maxed with 1100 remove why we why we did 1100 because we're going to put the margin 300 why 300 the sidebar is 300 right um let's set the color to something else I don't want this to be I believe that's nice yeah now this um again when I you know when I do navigations again 32 32 32 just paddings we're not going to do it for everything but just to prove a point um yeah so in in the layout tab uncheck this this visible on page load collapse when hidden right and we're going to set the condition but before that let me take a let's just do this home like dashboard uh let's do boom boom and let's set this to like yeah heading five just so we see now when this group is clicked we want to show this group right do not do you know hide so when we hop into workflows do not do like um what is it element actions show and hide don't do this if it's if it's not a popup try to um try to avoid this right always so the way I think about the way I think about this is is like you want to grab those values out of the URL parameters right so let me explain you go to page so navigation go to page and you're going to send the current uh the destination is going to be dashboard tutorial which is this whole thing right because this is a single single page App application and then we're going to send more parameters to the page at so the key is this as we have you know tab this is the key so let's do v as a as a view and let's do home right now when it comes to this um I'd love like every time I get an option get an option and I have this and I have a you know option set for those URL parameters uh and and keys right so when I decide to because there's like when you do not use Dynamic values there's a lot of room for error right so let's say I'm not going to do this for this video but let's say we do you know go to page home analytics project CRM settings uh if something changed I don't know I just want to rename it I would have to do it five times but if I go to an option set so go to data option sets and we can create like um page parameters and you could do like home CRM projects settings yeah actually let's let's use this let's use it right now so do so V equals home uh V I mean View and now get an option page parameters select the parameter homes display right so now when we go here and we click this V equals home right now set the condition when this group because this group's got there's nothing here there's nothing blue here right because it's um by default is not visible so let's set the condition when get data from page URL now this is a parameter we have parameter and path parameter is when there is you know tab equals something path is this slash page yeah just so you know parameter name again get an option page parameters home no what I do no no no sorry this parameter is going to be V right is and now get an option page parameters select home let's display and what happens this element is visible obviously I reloaded it there but if we grab this boom now you see it right obviously my whole page is is Big because I have a huge computer or monitor but you get the picture so now it shows and same thing you know same thing with an uh analytics you know project CRM stuff like that now um when yeah and lastly let's do when get data from page URL isv is get an option page parameters homes display then the color it's going to be neutral 600 now copy paste this is going to be I can color it's going to be white I'll copy this put it right here here same thing with this however this is a text now go to here now right we hover we click and now it stays like this uh it's you know nice for the user to know exactly where he's located um so yeah we have this we have this um now let's take a quick look at um at a floating bar a floating sidebar when the page gets smaller so lastly uh let's set up a condition when this window is going to get smaller uh let's make this pop up uh disappear right so let's grab another floating group um floating group let put it on the page let's make a top top bar say top bar uh again this is going to be row let's make the padding on the left at the top let's do this now let's get rid of the top and bottom uh with does not really [Music] matter and minimum Heights going to be 80 is it too much 250 what about 40 40 is enough awesome awesome and now let's align everything to the right let's grab um float floating group no not floating group grou material icon put it right here and that's going to be a hamburger how's that called hamburger menu menu menu home select this let's do 3x 30 awesome yeah so this is not visible on page load when current page w wi is less than 992 which is a tablet this element is visible now let's make a condition when uh sidebar is visible then this is not visible right so now we have this condition when uh it's less than 992 this is visible and when this is visible this is not visible [Music] right also we have this navigation Define new condition current page width is less than 992 then let's set the margin the top margin is going to be 40 the width of the this top bar right so let's quickly look at it um let's go here now now working mainly because we did not set a condition right here so current page width less than 992 this no sorry it was the completely out way around uh so just change this I don't know why I did that but like this and lastly this boom now it should work now we can nicely see it so if I do this boom Oh yeah and again when this current page width the margin on the left side instead of 300 is going to be zero therefore this is going to happen boom nicely done nicely done and lastly just set the condition uh it's going to be mobile n Bar um add a workflow no let's add a workflow for this I'm going to animate an element it's going to be the sidebar and fade in slight left in let's see yeah I think I like this yeah definitely so yeah this is it and this is a I would say very clean dashboard uh we have obviously I did not let when you go into the boom so if I was to do this you know we can hover over elements it's clean it everything is in the straight line we have the current user um obviously I didn't set uh anything else at an dashboard but when we click when we click on home it's going to send the URL parameters and when it gets smaller and it's going to show the top nav bar and yeah it's pretty pretty responsive the last thing I would do that the page should be the same thing right so nicely done awesome yeah so that's everything from me guys um hope you enjoy this video uh thanks for watching if there's anything you want me to um film record just walk you through um just comment down below uh like mentioned the beginning of the video if you want this figma template it's in the description as well as the UI colors app I thank you if you like this video give it a thumbs up subscribe if you want and I'll see you in the next one thanks bye

Channel: Max Kubanek

Views: 1,573

Keywords: Bubble.io, Bubble.io Tutorial, Tutorial, Dashboard Bubble.io, How to build dashboard, How to build dashboard in bubble.io, How to build dashboard bubble.io, Bubble.io development, How to build saas with no code, no code saas development, no code software, low code, low code no code, LCNC, How to bubble.io, Bubble, Bubble Tutorial, Dashboard Bubble

Id: QN0wGXd3fdY

Length: 37min 13sec (2233 seconds)

Published: Thu Mar 21 2024