Building A Client Dashboard in Wix - Wix Code Tutorial 2018 - Learn Wix Code

Building A Client Dashboard in Wix - Wix Code Tutorial 2018 - Learn Wix Code



You've been trying to build your own custom database for your clients. Well, I'm here to give you that answer. And instead of using jot form, like I showed you in my previous video, we're going to jump all those unnecessary steps and go straight to using Wix code. This is going to be an awesome setup for you. And it's going to be easy to capture your client's information and then display it on a dynamic page. That's their dashboard. And it's pretty simple, pretty easy to use. This is going to be a very basic video, not much design behind it, but just to explain to you what it's all about and how to get it started to get you on the right track.


So guys, before we hop into that, if you haven't already head over to wixmywebsite.com, this is my website. Get on this weekly Wix tips, email list, because it's already helping people out. And I don't want to see you lag behind. I want to see you get the valuable tips that you deserve. And I send out very extremely valuable weekly Wix tips. Very extremely. I know I threw my own words in there and and I send them out every week and I try to provide, you know, exceptional value with that and try to send out stuff that's really informational to you and my list. And I try my best to do that so head over to wixmywebsite.com and sign up for those weekly, weekly Wix tips.



Building A Client Dashboard in Wix

Now let's get started over here in our editor. So first we need to make sure developer tools are turned on. You can see that they are, and now we've got our tree over here. This is our site structure. We could minimize that or expand it just like that. That's simple. You could even drag it. Yeah, bam. This isn't a Wix code tutorial, but I just want to show you a few tips.



Creating Database


The first thing we need to do is we need to create a database because in this database is where all the client information will go. The client will submit a form with the information that they have created or actually we'll make it. So that way you sort of submit a form with the client's information in it. And then it will be displayed for the client to see on their client dashboard page. It's going to be real easy, real simple. So we go in here to the database, we clicked out plus new collection and we'll name it, client database. And then we're actually going to set up custom use. Sometimes this is easier because you get to set a few different parameters. That'll show you here. Although there are other ones like member generated, content members, only members only form submission or site content. That means anyone can view it or anyone could submit it. But in this case, like I said, we're going to go custom use. And then we set up custom permissions.


So who can read content from this collection in this case, we're going to want site member because we're going to want the client one to sign up for an account. And then two, we're going to want that client to have to be logged in. So that way they can access their information and not everybody on the website can come see it. Who can create content for this collection. We're going to do admin, who can update content admin, who can delete content admin. We're going to have the admin in charge of all of this content going into that database that's displayed on the dynamic page.


A lot of times, if you're dealing with clients, most likely the admin is the website owner, the business owner, whoever that is. And in most cases, they're the ones uploading that information. Your site member doesn't have to touch it. And this is where we differ a little bit from member profile pages to client dashboard. This is the one major change here. I mean, there's a lot of them, but this is one of the big ones. And then we click and set and create collection.



Adding Fields


Now that our database is finished, kind of set up we actually have to go ahead and add the field we want. So these are the fields we want to collect from our client and display it on their dynamic page. So we’re just going to go basics here guys. I'll go full name and it's a text field. I will go email address also a text field. I will go, let's see, what else do I want to go here? I'll go profile picture. And this is an image. Bingo. I will go, what else guys? Help me out here, even though you're not here. What else would a client have? Oh yeah, let's go total payment. And we will also go with the text field there, total payment, do text field there. And and yeah, I mean, we'll just rock and roll with that guys.


You need to create the fields that you want for your client and whatever you want to display on their dashboard. Obviously most likely most of your databases are going to be very long and spread out with a ton of fields depending on what you're doing for your client. In this case, I'm just giving you an example with these basic ones.


Creating Form


So now that we have our database collected, now that we have our database created, what we need to do is we need to create a form that us the admin could fill out that will automatically just send that information to the database. So that way it can be displayed on the dynamic page. So let's just go up here. We'll go to pages. We'll click add page. I'll just add a page. There's not going to be any design to it. I'm just going to show you what you going to do. So we're going to come over to here to add, we're going to go to user input and then we are just going to drag out some form fields. So we know we need their name and then I'm going to copy and paste it. We need their email and we need a profile picture.

So let's scroll down to well, I, since changed file, add file either way, and then we also need total payment due and these will be those fields. What we now do is click settings. I'm going to change this to add your full name and everything's set up there. It's required. And then for this one, I'm going to put, add your email address required bingo change file. This is already set up as needed. I'll say we'll change that to upload profile picture. Bingo, just like that. And then down here we will be putting total payment due. Again, guys we, us, the admin are going to be uploading to this form. So it's just what we, we need to put our little key phrases in here that we need to use to remember, okay, this is, this is the field I need to collect so that you're not making a fancy or anything like that.


You're simply making yourself a utilitarian form that you could submit to the database. Really it's an added step. You, you could just technically add the information you need to the database, but sometimes it's, in my opinion, it's actually easier just to upload the information needed to a form and it's quicker. And then it just submits the database and automatically goes to the dynamic page. So after we have that information, we need a submit button.


So we're going to go down to button. We'll just, we'll say contact us. Oh my gosh, you don't want that. And then we'll just put it here. I'll change the text to submit. No, we're not adding a link. And then once we have our submit button there, now what we have to do is we have to go back to add and we have to add our dataset. This is like the glue to your database. So this will connect your form data to your database, consider it the glue. So your data sets the glue. This connects the information that's submitted in here and automatically tells it to go to here. So it's nice. It's convenient. It's simple. You're just going to double click on it, make sure it's set up. We want to choose a collection and we want it to go to client database.


And then you want the mode to be write only because they're not reading this. We're simply writing in here and we're submitting data. So we want it right only. Now that we have that we can then go ahead and connect our fields to the database. So you click on this field, you'll see these connected data buttons. You'll simply click this. And then you'll see, since the glue was already on the page, it simply connects to the client database and you just have to connect it to the correct value in this case, full name, bingo. And you'll see it's green when the connection has been successfully made.


Then we'll go to email and we'll do the same thing all the way down connected with the correct one, go to profile, picture, connect it with profile. Picture bingo, total payment do connect it with total payment, do bingo. And then our submit. We're going to click connect to data. And then we're going to say link connects to submit. And then you could actually add success and failure messages. And then when successful, you could actually choose which page or link happens after that, after the form has been submitted in this case, we're just going to stay on this page, make it quick, simple for us.



Saving Your Site

Then quick, simple tip, make sure you save your work. We'll just save it as client database. Bingo, you save your work. We're not done yet. That's just a quick save along the way and then as that saving bingo. So now that we have our form, our database, we actually need to create the dynamic page. So the dynamic page is going to be the page that automatically creates your content based off of your form submission. So let me show you here.



Adding Dynamic Page


We're going to go back and this time we're going to add a page except it's going to be a dynamic page. We're going to start creating, okay. So this is an item page because it's going to show one single client. If you were showing recipes or wedding events or a product catalog, anything like that, you'd be showing a category page, but it will connect to client database and it will be an item page we'll then click next. And then you could actually set a custom URL. So we're currently not using this title field. However, we're going to do full name.

So we'll do www dot whatever your website is slash client database slash their full name, whatever they submit or whatever technically you submit in that form. And then you simply click create page. Once you've created the page, you will see the dynamic dataset is automatically added. Again, this is your glue. This tells your page that you're going to be taking information from client database and putting it into this page. But we actually have to go ahead and design the page.


So we're just going to go with a very basic design. Let's go with image and we'll open my image uploads. Let's just see. Well, my brother's got he's. He does some rap music, so we'll throw a picture of him on here. And then we'll just I’ll go with some very simple design here, guys. We'll go here. Add a nice little design, fix it up a little bit, and I'm sure you guys can guess what this field is going to be. Is it going to be profile picture? We'll throw it right here. Bingo. And then we want their full name in here. Again, you're going to be doing this for each each field guys. So each field you have, you're going to be doing this. And then we'll just say Justin Strauch that's my brother also known as Ellsworth, known on SoundCloud. Check them out. If you guys like rap music.


So profile picture name right there. And then we're going to come back here to text, and then we're going to add email right under that, come in here. And then we'll put email and then whatever their email is, we'll go right there. And then the last thing is total payment due. So we'll just come in here at a handy dandy little box here. We will change the color up a little bit. We'll go here. We will come down here again. I'm not going with any design guys. I'm simply showing you this to show you the functionality. We will shrink this a little bit. We will change the color to white, and we will change this to total just like that.


So this is your dynamic page, your dynamic page, your initial dynamic page should simply be used to design how you want it to look for each client. So this page is almost like a placeholder. What you need to do now is now that you have your data set on the page, you double click it, make sure you have the right one up here. It's connected to that. And then you're going to want it on read only because they're just going to read it. And you simply do what we did with the forms. So you'll come here to profile picture, you'll click connect to data, and then you'll say image source connects to profile picture just like that.


And then you'll come right here to first name and you'll connect to data and you'll come here and go up full name, connected, just like that. Email, same thing and again, it turns green when you successfully do it, bingo right there. And then total, you come right here to connect to data, connect it to where are we at here, total payment due. And then it turns green. And this page right here, again, this is horribly designed by me, but this will be your page. That's well thought out and designed. This is your actual client database is where you need to put some thought into it. And then this is where you connect all the fields.


Now, if we save it and then we go back to our new page with our form on it, we'll submit some data. Let's do it. So we'll go here. We'll just say Michael Strauch. We'll add my email computermdofgilbert@gmail.com. We'll add a beautiful picture of the one and only Michael Strauch. Let's find one. Let's go back into senior pictures. I liked this picture and my total payment due is going to be $1,500 today. Oh no. That and then we're going to click submit, and then we will see that it has been submitted. And now that it's been submitted, we will go back to the editor. See if it's been added to the database. Let's check. It has bingo, bingo, bango. And then what we're going to do is we're going to go to client database. And if we do this correctly, let's just see, I'll just publish this site just for the heck of it. We will test the URL. So view site, you can see, we have our URL here and now if I'd go forward slash Michael Strauch, my dynamic page should pop up. Let's check.


Interesting, 404 error. Well, we don't want that. So let's go back here. Let's make sure everything's okay. And let'ssync here. We're going to sync our database. This is our sandbox, and we're going to sync it with our live database. So we're going to copy all items to live and we will see if that makes a little bit of a difference here, because if we come here, client database, there we go. Alright, so now if we go back here, click publish again. Now we should get a better result. Let me grab that URL. Go here. Client database slash client database slash Michael Strauch. Nope. Nope. Still had an error. Let's go back. Let's check again. This is part of the problem solving phase. Guys. You come in here. There's a dash. Okay, so big time, big time, big time, big time.


So let's go back. Let's try that again. It was also, I don't know if you noticed, but if you come here, you can check in the database and you could check the link extension to see how it is client databases capitalized. That is another key factor I may have missed. And then you'll see a dash between Michael and Strauch. So if we go back to publish and view site, we come back in here slash client database slash Michael dash Strauch. Let's see if that makes the difference.


Looks like we don't have permission, bingo. Why we don't have permission. Let's go back. Client database, edit permissions. The reason we don't have permission right now is because we're not currently logged in, but if I change this to anyone, I can go back because you had to be a site member. If I publish it, we'll come back here. You guys get to see all this pride problem solving, and then we'll go here, refresh the page. Now I can view it because it's not I, I'm not logged in and it's available to anyone.


Conclusion


And it's just that simple guys, it's that simple to work through. And it's that simple to create a client dashboard. Again, there's more in depth. You're going to have more fields, more, more to it, but it's that simple to create. So if this video helped you guys out, please drop me a like down below, comment if you have any questions at all, and let me know if you kind of liked that debugging there to try to work through my issues. You know, even us web designers have some issues. Sometimes we always have to work through things. That's why we always budget time into projects. It's all part of the gig. And just like that. That's how you work through problems here in Wix.


If you enjoy this video, please drop a like down below again, comment. If you have any questions at all, don't forget to subscribe to me here on YouTube, ComputerMDofGilbert, and then head over to wixmywebsite.com. And don't forget to get on these weekly Wix tips, email list, guys. I would love to have you on there. I look forward to seeing you on there and thank you for spending a couple minutes with me. Have an excellent rest of your days.

0 views