Build your own nocode CRM with Bubble.io – Part 2

Welcome to Part Two of Our Bubble Tutorial Series

Welcome to part two of our Bubble tutorial series looking at how to build a no-code CRM using Bubble.io. In part two we're going to be looking at a lot of design to do with building a dashboard page for your CRM and we're going to be using a Figma design and incorporating that into the design of our Bubble app. Now if you're learning Bubble you need to check out our website planetnocode.com where we've got hundreds of Bubble tutorial videos many of which you cannot find on YouTube they are exclusive to our members at planetnocode.com but let's launch into this video by first of all going to our dashboard.

Setting Up the Dashboard Page

Now our previous video was about login and registration I think it makes sense to have that on the index and then when someone's logged in or they're registered they arrive at the dashboard just like this. So first thing I'm going to do is set up my page or my canvas to be the width of the UI kit that I've purchased. I'm a big fan of using UI kits you can find some amazing ones at UI8.net but for this one the width I'm going for is 1440 and this tutorial is going to include a lot of tips and tricks for working with columns and rows to get that perfect layout.

Creating the Sidebar

So this is going to be set to a row and I'm going to add in a floating group because this is going to be my sidebar and my sidebar width is going to be say 280 and it's going to be a column and then the rest of my page is going to be nested in two groups and I'm doing a floating sidebar because I want the sidebar to stay static even when I scroll the rest of the page and here's one way that you can make this work.

Setting Up the Body and Main Container

So I've got my background group I'm just going to call this one body and it's going to be of type column and 100% width and then I'm going to add in another group inside the body that you can see here and I'll call this one main container and this is going to also be a column and width 100% but with body remember the width of my floating group is 180 so my body is going to have a padding on the left hand side of say 300 and now let's add in some content into here so I think first of all I'll add in a header.

Adding Content to the Dashboard

Now there will be a follow-up video where we improve the design of this but right now I'm just going to make it functional so I'm going to say dashboard and in my main container I'm actually going to add in padding here of 20 all around. I put it in margin I meant to put in padding that's why it's not working padding left 300 I just noticed that it had gone off the side of the page there that's fine right now sidebar I'm going to make this a different color just so that it stands out a bit let's go for a nice gray and then dashboard okay so let's create a row which contains different stats different kind of elements so I'm going to use a group basically to get your layout of rows and columns you want to be using nested groups not any more than you need but you might find that you need to add in quite a few nested elements to get that layout when you're laying out elements and Bubble it's so tempting to try and use fixed layout I mean that's the default and you think oh this gives me infinite freedom of where I could put things on my page but when it comes to making it responsive it causes real headaches so you want to be using rows and columns 90% of the time 5% of the time aligns parent there are some situations where I think aligns parent is the best option and then you know yeah fixed if you can avoid using fixed avoid using fixed so this is going to be my row of stats and so I'm going to make it of type row and then 100% width and I'm going to add in a group because this will be what contains one of my stats and going back to the UI kit that I'm using gonna add in a border this is going to be a column border solid paste in okay paste isn't working out all right in that's a hex code for the color and then the border radius is 12 okay and then there's going to be some internal padding of 24 and I'll add in a title for it just getting roughly the size that I want in fact I'm going to use a custom style here so the title I want to use is 16 now the font app here this is the default one from creating this app is open sans I'm going to change that to inter so I go actually I'll go into styles and I change the default to inter go and it's going to be 500 and then I'm gonna add in a margin on the bottom of 24 and I'm gonna call this today's revenue make the width 100% and now I'm going to save it as a style I call it header card cool and then I could put any stats that I want to below but I want to put four of these in the row so I'm selecting my group D and I'm going to paste into the parent my four and then I'm going to set this to have a gap between apply gap spacing between elements and the gap I'm going to use is also 24 very consistent design here and now I want to get rid of the fixed width here so I'm going to put a mean width of 200 in each of them so that when the page is reduced to a certain size they won't get any smaller because I'm going to have stats in there in the end but right now I want them to fill the space cool okay so then I could put my other titles in there now I'm going to put in a group down here just so I can illustrate the floating sidebar so this is going to be width 100% and I'm going to say min height of 1000 so I want it to encourage my page to scroll and then I'm going to set the background color to red so it really stands out and lastly on the floating group let's start putting in some parts here so I'm going to have 36 padding on the top 60 on the side right so up top in fact I'm gonna have the same topography is here whoa where did that go paste into there brilliant it's this goes a dashboard then I'm going to add in a another group in this go form part of my navigation so I'm using a group because I'm gonna combine an icon no actually I'm gonna I'm gonna use a link element link and so I'm gonna have overview and make this width 100% really mean height but then I'm gonna give it a bit of paling top and bottom of eight eight okay so that's still nicely sent is it then let me show you a trick with font awesome so font awesome version 4 is bizarrely it's out of date look they say it's so 2017 but it's the default font library that Bubble those in it's what you get when you use the icon element and you can do a neat trick here which is if I just find the appropriate one yeah let's say line charts I can copy the label here and then I can write in inline in the text using BB code which is a little bit like HTML but in square brackets and you can see I get the icon in there but in two spaces yeah not looking bad our copy and paste this so you get an idea of the layout I'm going to add in another style here which is going to be that this is inter 16 600 600 let's say that as a new one call it nav link and then apply it to all of my existing links hopefully as we go along you're picking up some hand handy tips of how to design well in Bubble right now I'm going to preview so look I can scroll my page and my sidebar stays fixed now I'm going to show you one really handy trick for making this responsive although we will feature making the whole thing responsible in a later video but just to prove that I think this is one good way of going about adding in a floating sidebar we go into responsive we can see it collapses down and really at some point I want to get rid of the sidebar so why don't we say kind of tablet portrait mode we get rid of the sidebar so I'll add in a conditional statement and say when page width is equal to or less than 992 we get rid of it now because it's a floating sidebar or floating group it hasn't actually taken up any space on our page the way that we're taking up space on the page is to use a left hand padding on body so I add in the same rule here when the current page width is equal to or less than 992 then I make my padding left 0 so look now we have a responsive design and what I've done in the past is I've taken the innards of my sidebar and turn them into a repeating group sorry not a repeating group a reusable element so I then place that reusable element in my sidebar but I can also place it in a pop-up or a another or a what's the one I'm looking for a group focus so that when a hamburger icon is clicked I get exactly the same set of links exactly the same now as the sidebar so they have it that is part two wraps up of how to build the CRM using no code and Bubble in other videos coming up of which we're going to make them member exclusives we're going to give you two but there's many more to come and you're only going to be able to access them if you become a plant no code member and we're going to come in privacy rules we're going to be covering data database structures how to really flesh out the CRM into something that is usable for your business or something that you can sell on to clients