How To Build an Admin Dashboard in Wix | Wix Database & Dynamic Page Tutorial

What's going on Wix Nation MPS here from Wix Training Academy. And I am currently recording this video from back home in Arizona. That's right. I'm back from finals and I'm here for winter break to celebrate Christmas and the new year with my family and friends. So I'm pretty stoked about that.

Anyway, I know why you're really here. You're here to learn how we are going to build an admin dashboard in Wix. And what I'm going to do is I'm going to show you how to do that. But before we can dive into that, there's one thing we have to cover and that's to make sure you hit that subscribe button, the bottom right of this video and turn those bell notifications on you'll instantly plug into 30,000 plus other like-minded entrepreneurs. And hey, if you're excited to learn about building a dashboard and admin dashboard in Wix, why don't you comment and drop a like down below while you're already down there hitting that subscribe button, right? It doesn't hurt. If we use any code in today's video. In, in any of my videos, you can go to wixmywebsite.com link in the description below, and you'll get free access to my Wix Training Academy. Just click join the Academy and boom you're in email password, free access, no strings attached. So can't really go wrong with that.

How To Build an Admin Dashboard in Wix

Let's talk about how we're going to go ahead and build an admin dashboard using Wix new functionality called Dashboard Pages. So if you didn't already know a Wix recently, they've been rolling it out to several accounts over the past couple months. I'm really particularly the last really couple of months, not like few, but a couple like the last two, three months, and it's called Dashboard Pages. And it's an actual page you can add to your website. And the real big thing behind this page is it's just like any other page on your website, but it's hidden from the menu. There's no login on it.

So that way either you are a back office team member on your team can access it and there's no header and footer. It's just a strict dashboard page. So you can actually build out a dashboard style page with it rather than having to utilize some odd page on your website. That's added in the menu. This is specifically for backend use for back office use. So it's really cool. It can also be accessed from your witch dashboard. So the question is, how do we add it? Right?

So what you're going to need to make sure first and foremost is that your Dev Mode, your Corvid tools are turned on. They have to be turned on in order for you to access this page. Then what you're going to do instead of going to your page manager. What you're going to do is you're going to go to add, and it's already default to page up here. You're going to want to hover over the page, and then you're going to want to create a dashboard page. And we're going to click Dashboard Page.

Then we're going to get a nice little message that says introducing dashboard page, here's the good news behind it. You can read these three bullet points. These will actually integrate with your database and with your code. So you can build a backend admin dashboard for like managing members for managing real estate listings, which is the example we're going to use today. Just as an example, to show you kind of how it works, how the functionality can be used, and you can manage everything really on your website from one main dashboard page, you can create multiple of these as well.

So if you've got different types of tasks for different back office members, you can create separate dashboard pages for each of them, which is really cool. So we're going to click add dashboard page, and then it's going to add a page. You're going to name it. We're just going to name it a "Property". We're going to name this "Property Management". We're going to press done. And as you can see here looks like an everyday normal page that you wouldn't regularly add to Wix. Although the difference is it's a dashboard page it's added to your Wix dashboard and it's blank. There's no header and footer. It still connects to everything. So we're going to call this "Property Management". The reason we're going to call this "Property Management" is we're going to pretend we are a property management company or a real estate company.

That's got several listings and what we want to be able to do from this dashboard or see the current listings we have. And we also want to be able to add a new listing into our listing database show. It can be displayed dynamically out on our public facing website.

So what we're going to do is we're actually going to build a repeater back here with the current active list listings. So that way the admin can manage them, can view them, make sure everything's accurate. And then what we're going to do is we're going to add a button so that the admin can go add a new listing. And we're going to create an additional dashboard page to upload new listings. So let's get to it.

So number one, first and foremost, what we're going to need to do, just like we always need to do for using a repeater is we need data to pull from in order to actually display those results in the repeater, which means we need a database. So we're going to go to our database now called Content Manager down here, and we're going to create new collection. We're going to call it "Properties". Perfect.

We're going to go ahead and change the permissions here. We're going to go to custom use. We're going to set up custom permissions who can read content from this collection? Anyone. We want anyone to be able to read this because it's going to be on our public facing website, right? They're going to be able to see our active listings on our website, however, who can create content. This is all admin who can update content admin, who can delete content? Admin. The admin is the one that's going to be able to actually edit, update and create the listings. No one else. And we don't want anybody else to be able to do that. And if you have an admin contributor on your website, maybe someone else from your office, they will also have the ability to do this. So if you want to be able to delegate that task, perfect and do specially with these dashboard pages.

Then we're going to set and create collection. And now we've got our collection here. Now I'm going to keep things very basic for the sake of this. Again, we're using properties as an example, but I'm not going to go super, super crazy with tons and tons of fields for each property. We're just simply doing an explanation here. So I'm going to first do address. I'm actually going to change this to an address field type a we can use the address field type. We're going to display this text in the repeater. I'll show you more about that. So address is going to be one field because we want to display the address. We want to display, I'm just going to, for the sake of this, do one property photo. And this will be the main property photo that we use. And this will be an image file because it's a photo we're going to add that we're going to do a number of rooms.

Field type here is also going to be text. And we're just going to do these three fields for the sake of the tutorial here to show you how this works. So we've got address. We got property photo, we got number of rooms. That's what we're going to be displaying. That's what our listings are going to be displaying. Granted, if you are an actual real estate or property management company, you are going to have much more fields in this you're going to have, does it have an AC unit? An AC, you know altogether central air, does it number of bathrooms number of closets, whatever other fields you may have. I'm trying to rattle them off the top of my head, but it's going to be much more than just three fields is what I'm ultimately trying to get at.

Now, how many of you decide to display on the repeater as a preview? It's completely up to you. I'm sure the repeater will have some information. And then when they click on that particular page for the actual listing itself, I'm sure you're likely to have much more information on the actual page property listing itself. So for the sake of this example, we're using three fields here.

So we've got our database created. Now what we need to do is we need to go ahead and add content elements. We have to add a data set to this page. Why? Because we are going to be displaying data in a repeater. So what we're going to do is we're going to double click on our dataset. We are going to choose properties. It connects to the properties collection, the properties database. And we want this to be read-only for right now in the backend on this admin page. We want this admin page to be able to simply view the active property listings. So it's going to be read-only. You can do read and write if you want them to be able to modify. I find it easier to do an edit page in of itself. So to have a read-only listings page and edit listings page and an ad new listings page, that's how I would personally do it. But it's completely up to you. That's how I'm going to do it in this video.

So there's going to be read-only. You're going to choose the number of items to display. Maybe you have a hundred houses, so you can have a hundred items to display there. That's totally your call. That will be how many items the repeater shows. So if you only have three, the repeater will only show three items. So you need to make sure that you don't limit yourself either if you have way more properties than what you actually register down here in the dataset.

So now that we've got our dataset, correct, and set up, we've got our database set up. What we're going to do now is we're going to go to add, and we are going to go to lists and grids. And I'm just going to pull this one right here, because honestly it's kind of the most property clicking one. I'm going to get rid of the white box there. What do we got here? We did property address. We did picture and we did number rooms. So actually what I'm going to do Is I'm going to keep that from five 50, that'll be number rooms. So this right here will be property address. I'm going to change the font up a little bit. We'll just type in address right there. And then we'll stretch this more full width, I'm going to delete that the right there, and I'm going to call this "Number of Rooms". Perfect.

So now what we got here is we've got our fields, we've got our property image. This is our main property image. We've got the property address that we're going to add right there. And then we've got the number of rooms right here. So now what we have to do is we have to actually connect these items to the database so they display. So what we're going to do is we're going to click on our image. We're going to go to this, connect to data button. We're going to click that. And then we're going to connect it to a dataset. The only set data set we have on the page right now is the properties we're going to connect it to that image source connects to property photo, right? Then what we're going to do is we're going to connect our address, connect to data properties, dataset connects to address you'll know that it's successfully connected when this connected to data button turns green, and then lastly, number of rooms. So I don't want the dollar sign associated there.

So now what I'm going to do is I'm going to click on it, connect the data, and we want this one connected to number of rooms. Perfect. So now we've got our data connected to the repeater, which means now when there is data in here, it will filter into the repeater. So what we're going to do just to test part one of this is go into the database and add some sample data.

So I'm going to go into the properties database. And this is in the sandbox database. This is not the live so we can mess around in here. Address, I'm just going to say one, two, three

Mainstreet. And it looks like we'll just go Addison. Perfect. One, two, three main street property photo. I'm I'm not even gonna come off there. I'll type in the Wix, the Wix photos. Yes. Wix does offer free photos, just so you know. Perfect. This is a cool looking background. So I'm going to add property photo there. Let's just say it's got two bedrooms. Great.

Now I'm going to go ahead and add another one. I just want to show you a couple, 172 East South Street, Southern Avenue. Perfect. Property photo. I'm going to come in here once again. I'm just going to type house use Wix's free pictures. Cool. Very good. She's got one bunk bed. We'll say this is a three bedroom and then I'll do one last one. And we'll just say 543 South 4th Street. There we go. So Forest Avenue doesn't want to type all the way out. There we go. And then let's come in here. Property photo again. I'm just going to type house. We'll say this has got a one bedroom. Perfect. Now we've got sample data.

Now what should happen is that data we just put in here should show them the repeaters. So let's preview and test it. There we go. So our repeater works. It allows us to see our active property listings. However, we're not done. I said I wanted to create an admin dashboard, that we can create a button that will allow us to add new listings in here as well. So now that we see it works, that's step one. Perfect. We've got that accomplished. Let's drop a like button down below because that's exciting stuff. And you're happy now that you see that this works right, we're creating a connection here. You feel me reviving together. We're vibing together.

Make sure you hit that subscribe button too. Why? Because we're vibing together. So let's vibe on, into the next part of this, right? So we're going to go back to our editor now, and now that we know this works, what we're going to do is I'm literally going to come in here. I'm going to go back to page and I'm going to add another dashboard page.

This additional dashboard page is going to act as an ad listing page. This is going to be the page that we can add additional listings to the database. So it shows in our property management page and in our live website. So this is going to be our ad listing page. I'm not going to add anything on this page yet. What I'm first gonna do is I'm going to go back to our site menu.

I'm going to go to dashboard page. I'm going to go to property management and I'm going to come in here to add, and I'm going to add a button. I'm going to grab a button. I'm going to grab this one right here and I'm going to bring it up here. And I'm going to name it, "Add New Listing" and I'll do a plus button. So now this button says, "Add New Listing". Again, this is a dashboard page. So they'll be able to add a new listing right from here. What I'm going to do is I'm going to link this to our "Add New Listing" dashboard page. So that way, when they click this, there'll be taken to that ad listing dashboard page.

Now that we've got that complete, what we're going to do is I'm going to go back to my menus and pages. I'm going to go to this ad listing page. Now, just like you guys have learned all the way through with me. When you are adding data to a database, you need custom user input forms. You need input fields so that way data can be written in them and then submitted to the database. So what we're going to do first and foremost is where you're going to add a dataset, because you know, now that you've been on this channel and part of Wix Nation for awhile, that you can't add things or read things from a database on a live page without a dataset.

So we're going to go to our content manager. We're going to go to add content elements, you are going to add a dataset. We're going to click settings. We are going to connect it to the properties database because we are submitting a new listing, a new property to this database. However, this time we are going to be in write-only mode. Why? Because we are entering data to the database. We are not viewing the data. We are actually entering the data. So it's going to be write-only this part down here doesn't matter.

Now that we've got our dataset on the page, we have to add our input forms, just like we did in the book, back in the database. And we entered that data. If we go back to content manager and properties, we need an input field for each field of the database. So we need one for address. We need one for property photo. We need one for number of rooms. So we're going to go ahead and we are going to do just that. We're going to go to add, and we're going to go down to user input. First and foremost, we need an address field. So we're going to go to this address input guy right here. We're going to click on it. And then we're just going to choose one of these address options. I'm going to pull this one right here. And this is B.

This will be where we can add the address. So we've got address. We need to add a file upload. Why? So they can upload a property picture and we are going to go to upload button and we are going to choose this guy right here. Now we've got our upload button for our property image. Again, I'm not going for design guys. You're going to want to make sure this page looks good. That it's clearly marked like this is address. This is property image. This is whatever XYZ. And again, your add a listing page will likely be much larger if you're a property management or real estate company, because you're going to have way more fields than just three.

So now we've got that. And then the last field we need is we need number of rooms. So we are going to go back. We are going to go to user input and we are just going to do a text selection here. And this will be where they could input number of rooms. I'm not changing the names of the fields on here, guys, just for the purposes of this video, I'm showing you how it works.

In addition to these user input fields, what we need is a submit button. So we're going to go back to ad and we are going to just grab a button, any button you want, you guys choose the design. We're going to come down here. We are going to name this button, submit listing.

So what will happen is when data is entered in here and they click submit listing, it will be submitted to the database. However, in order for us to make that happen, what we have to do is we have to connect just like we did in the repeater, these elements to the dataset so they can submit to the database.

So we're going to click this connected data button. And this field matches up with address we want the data here to submit to the address field. We want the data in the upload picture to submit to property photo. And remember, it'll be successfully connected when this turns green, which it has. And then lastly, this is going to be our number of rooms. And we want this connects to number of rooms.

Now the last thing we need to do is submit our, create our submit button. We are also, we're not going to link anything, but we are going to go to connect to data and click action. So when this is clicked, connects to submit, and then what we're going to do is once this is submitted, we are going to have it, take them back to go choose the link. We are going to have it, take them back to the property management dashboard page. We are going to click done. So that way, when this is submitted, it'll take them back to the property management dashboard, where they can view their active listings.

So now we've got that. Let's give it a test. So let's start from the top. Let's go to our property management. Let's click Preview. Alright, perfect. Should we've got our active data in there. Now what we're going to do is we're going to add a new listing. Great. It takes us to our page here. We are going to add an address. We'll just say 1234 East, South Ave. Then we are going to upload a picture. It's going to take us to our files. I'll just add a picture of my family and I, I know it's not a house. Well, and then the number of rooms, let's just say, we've got a four bedroom house and then we are going to submit this listing and it should submit to the database and then take us back to our property management page. Look at this house. It's my family.

So now we've got our house right there and you can see it submitted it to the took us right back to this property management page and updated it with the new data as well. And that's exactly how you build an admin dashboard here in Wix. We used a property management example.

Conclusion

If you guys would like to see a different example, similar video, because it is different by a bit comment down below, let me know what type of example you'd like to see hit that like button if this was helpful and you thought this was a pretty sweet video and make sure you click that subscribe button guys. Why? Because we're vibing, we're vibing, right? We've I feel you I'm on the same connection. I know what you want to learn. And I'm here to deliver that. And I hopefully did in today's video, let me know if I didn't in the comments and you'll can also let me know by hitting that subscribe button, turn those bell notifications on.

Lastly, it's appreciated when you head over to wixmywebsite.com and register completely free. Join the Academy, email password. You're in no strings attached. Other than that guys, that's all I got for you. I'm happy. I'm back for Christmas break. No school on the radar for me. So life is good. That's all I've got for you. I hope you enjoy today's video. I'll be coming to your back with another one here very soon. Enjoy the day.