How To Create a Simple Dashboard With Webflow | WEBFLOW TUTORIAL:

Key Takeaways

we've recently built a personalized dashboard for our students in webflow let me show you how it looks so this is basically the dashboard and students can click here to see their progress and see what do they need to work on now building dashboards with webflow is something that a lot of people ask us about and this was actually a pretty fun hack to do so in this video i'm going to show you how we've built this let's rock and roll [Music] hey design friends what is up my name is ron sago welcome back to fox and welcome to another webflow tutorial this time something super popular on demand dashboard so on this new program that we have which is called web design mastery it's a small group that we're working on with students directly and we're working with them on their actual project to verify and make sure that they master a lot of the skills required for web design so let me show you this is the dashboard that they have they can see how many of the skills we're working on them on specifically on 30 skills and basically they can always come here to see the status of which skills they've got honed and which skills they need to keep working on and this is an interactive dashboard that we've built with webflow so let's dive in to see how we've structured this and how we've made this possible so first thing i want to show you is how this works with the cms of webflow we structure this on the cms so basically to begin with we have a database of the students and for each of them basically what we have is um the name of the students and we've created kind of like a unique slug for each of them so it doesn't have it's very very simple it doesn't have a login it just have a very very random slug so nobody will be able to guess it and then we send them the the link to this dashboard so as you can see this will be like app flux academy students and this is rand test but each one has their individual link and then we have here the skills and this is basically a list of the skills they've already mastered now this is basically a multi-ref field meaning that we have here another collection called skills and here we basically have all the skills just a list of all the skills so this one this multi-ref field is just pulling from that list and basically we can pick here which skill is um you know which skills they've passed or which one they need to they don't need to keep working on and of course we can send from our crm or where we're working we can trigger a connection with zapier to add it um so when we on our systems we check off a skill it sends um webflow through the zapier to update this custom field and then the the dashboard changes so that's it it's basically just a list of yes no have they honed this skill yes or no now let's see how this is actually updated in the in the website so here's the structure of the page basically this is the you know students template so it's basically changing for each one of the students and the way that this works it's is rather simple so we have the skills here let's see where the skills are hidden um basically we have here let me go and show this so we have all the skills hidden here and for each skill we actually have two images two icons as you can see here we have the pass icon and the no pass icon and just the each one of these skills each one of these images has what's called conditional visibility so here in the setting for that image you can see that it's set to conditional visibility meaning that it will right now i've selected the pass icon for design concept so this icon will be visible only if you know skills contain design concept if this if skills does not contain design concepts meaning they didn't pass it would just not show the check marked icon and of course the other one for the no pass has conditional visibility for example only show this image if skills does not contain hierarchy so this is a very very simple way to just show or show yes or no for these icons so that is the first step that is the most basic thing that we could we could do using conditional visibility we can just you know show past no path now where it becomes a little bit more complicated and when we did need to add a little bit of custom code is where we wanted to actually calculate how many so for example now you're seeing the skills for design fundamentals so we wanted to count them so in this case we would need to count three and then also we want to show this kind of progress bar so here's what we did and actually bob helped us out with the custom code and he came up with a super super brilliant way to do this so let's go into the custom code so initially we have two things going on um basically he what he's doing is he's counting how many um pass icons are basically visible so how many divs exist with this and then he gets the number and he updates the number here so this is the first thing let's see how this is done here in the actual in the body tag so we have one for the progress bar so in the progress bar you can see he has a function and he's counting how many divs lengths is counting how many divs have this and then so basically what he's counting is how many divs have the title of conditional invisible and then he's basically counting okay so you have 30 skills and then out of them let's say 15 are set to be invisible that means 30 minus 15 will actually give the number and then he's just putting the number in the you know specifically in the progress bar but then he has it for each one of so here's the one for design fundamentals he's basically counting how many divs there are how many conditional invisibility he's doing the calculation and he's updating the number so this is a function that does that for each one of the modules and then how we did the graphs initially we thought about bringing kind of a graph library but it was too complex and bob had really really simple and brilliant idea because basically we have for each one of the models just six skills so basically he used this kind of arc as a mask and inside of it he basically put a rectangular so depending on how much you rotate this rectangular that is being masked by the arc you can basically simulate you know the progress because basically we have to rotate so we have 180 degrees possible of rotation so if i'll do 180 divided by six skills meaning each wrote each skill is equal to 30 degrees so basically he has he has already counted you know how many skills we have that are not invisible so all you need to do is take this number multiply it by 30 and that number you need to basically rotate the um you know the the rectangular that's being masked by the arc so let's see where this is being done here that's actually being done i think in the css and let's see let's see yeah so here's this is the radar ah svg basically he created uh six different possible styles depending on the rotation so you see if he has one skill rotate 30 degree if we have two skills rotate 60 degree if we have three skills wrote 890 and so forth until 180 and based on what the calculation was how many uh you know um how many we counted we're gonna pick the right style for that box all right so this is basically how we've set up this dashboard this was uh one two day kind of hacked together and again was possible with bob creative thinking about how to work this with a very simple custom code if you want to learn more about how to do stuff like that with webflow feel free to join the waitlist for our webflow master class and let us know in the comments what you'd like to us to do more tutorials on here on youtube and i'll see you on the next video bye