How To Build a Dynamic Page Leaderboard in Wix | Wix Database Tutorial
top of page

How To Build a Dynamic Page Leaderboard in Wix | Wix Database Tutorial



What's going on Wix nation MPS here from Wix Training Academy. And today I'm going to show you how to build a dynamic page leaderboard in Wix. Why such a random topic you may ask, because we just announced the beta of Wix Nation leaderboard. That's right. You have the opportunity to get to the top of that leaderboard. And it's a whole points leaderboard. You can access in the description below and it starts right now. We're ranking it via comments. So if you're the top comment, if you have the most helpful comment, or if you just comment in general, you are going to get points. When you comment on each of these videos and you can track where you stand in the leaderboard, the Wix Nation leader board in the link, in the description below. And that's what we're going to build today in today's video, I wanted to show you and that's kind of the story behind it.


So I'll kind of walk you through how I built the Wix Nation leaderboard, and then we'll go through it and you'll have an opportunity to rank up in it. So let's first dive into it by clicking that like button so you never miss any content. Comments, so you can rank on the leaderboard and let me know if you're excited to learn about this. And lastly, make sure you click that subscribe button in the bottom, right of this video and turn those bell notifications on so you never miss a single upload and you'll instantly plug into 30,000 plus other like-minded entrepreneurs. If you want some free Wix training content I've got it for you. Come over to wixtrainingacademy.com join the Academy and email password. You're in no strings attached, that's it let's jump into it.



How To Build a Dynamic Page Leaderboard in Wix

So we're here at our blank editor, right? And what we're going to need to start with activating our Corvid tools. So we have to go up here to Dev Mode, turn on Dev Mode, and then I'm going to X out of this. I'm going to blank template right now and just keep things nice and simple. And then what we're going to do is first and foremost, when building a leaderboard, we're building kind of a small scale leaderboard. Again, the Wix Nation leaderboard is in beta right now. So it's minimum viable product. So that's kind of what I'm showing you in today's video, but it gets the job done. And I think it gets the job done in a well-designed and well functionality type way.


So we have to build a database. What that database is going to have is it's going to have a name, a picture in the case of the, Wix Nation leaderboard, a YouTube icon with a link back to that particular person's YouTube channel, and then the current points. So the way this leaderboard is going to work and the way the Wix Nation leader board is currently set up is it's manual. So I know that sounds like a pain, so there's no actual automation behind it, especially since it's minimum viable product, we're going for the most simple, but yet working product possible. So everything is manual.


So when you guys go through, you put your comments on this video here, and you guys are ranking up in it. I have to, or I have an assistant actually go in and manually enter the points. Each time you comment. And each time there's a top comment, a helpful comment. That's how it's going to have to work for this particular leaderboard. When you start, you can add more automation, a whole bunch, more automation, as much as you really want. And you have the ability to do that in Wix. But for the purpose of this, I'm going to show you the base of it and how to begin it. And it starts with the database.


So what we're going to do is we're going to go to our data button down here. If you haven't noticed nice, the little nifty data button, we're going to create new collection, I'm going to start creating, and I'm going to start from scratch and not use a preset. I'm going to name this database leaderboard. And then it is going to have some custom permissions.


We're going to set up the custom permissions who can read content from this collection and the case of the Wix Nation leaderboard, which is basically what I'm going to walk you through how I built it's anyone. So anyone from YouTube, anyone on the public can come see this leaderboard who can create content admin, who can update content admin and who can delete content admin. So I'm the one actually assigning the points, updating the points, the leading the points. That's all on my side as the admin.


I'm going to set and create the collection. It's going to do its magic and it's going to populate a new blank database here. We're not going to use this title field, but what we are going to use his full name, and that's going to be a text field because I'm going to pull the YouTube username from the person that comments, and I'm going to do it in a text field. I'm not going to do anything special for that or username or anything like that. I'm just going to put full name for the case of the field. I'm going to press add.


Then I'm going to include a profile picture. This will be pulled from YouTube. Whatever you have on your profile picture for YouTube is what's going here. So if you want to be on the leaderboard in Wix Nation, and you're going to comment, no that I'm pulling this information from your YouTube channel and I'm going to choose an image. Then I'm going to do you YouTube URL. This is going to be a URL. This is going to be obviously whatever the link is to your channel. And I'm going to include that there. And then I'm going to do total points and this will be a number field. And this will be a number of points that you will be assigned. And the way the scale currently works, if you comment, you get 10 points. If your first top first comment, you'll get 25 points. If you're a helpful comment and you're one of the community's helpful comments, and that'll go off of community engagement. If people like it, reply, engage with it, you will get 30 points and that's how it's going to work for every single video.

So the more you comment, the more you engage, the more points you're going to rack up. And eventually we're going to make this a really, really cool thing. But we're starting with simply YouTube comments.


One because everything's manual right now. And it's easy to track and two, because it's a good way to test it out and see how it works. And if the response is well from you, then we will continue building upon that. Adding, you know, like little contests, prizes, stuff like that. So it's going to be a real fun thing. So we'll do number and that's going to be total points just like that. Our database for this is built out. There's nothing more, nothing less that we need right now at the moment added to the database. I'll show you why, because now that we have our database here, what we're going to go do is I'm going to go add a page. No, this is not going to be dynamic to begin. I'll show you why. I'm just going to name it. Leaderboard. I'll make it dynamic with the data set.


Now on this leaderboard page, first and foremost, maybe I'm just weird about this. I don't always like headers and footers. So I'm going to get rid of the header and footer. And then I'm going to go to add, now we have to add a repeater because we are going to be displaying data from the database, collectively lots of data. So it's not going to be just one item. It's not going to be an item type dynamic page. It's going to be category with several pieces of data entry. So what I'm going to do is I'm going to go to list and grids, which is where the data lives are. The repeaters live, excuse me. And the way I'd set it up for the Wix Nation leaderboard is I'm doing a top three and I'm going to show you the exact same way.


So I'm doing a top three and I'm going to edit the design and all that in just a second. And then under, that will be the actual kind of running leaderboard for everyone, not on the top three. And I'll drag that about yea high. And then what I'm going to do is I'm going to come through here and drag it out. So now what you're about to see is you're about to see me do a little bit of design. I might speed this part up in the video, but I'm literally just going to be designing this to add the profile, picture the full name, et cetera. So let's see if I can do this quick.


All right guys. So we're done with the little speed design right there. I got the design properly set up. Mine is this dollar sign right here. That won't be there. Okay. So minus the dollar sign, I got the design set up. And well, one last little thing. I want the design of the repeater to show. Same as above. This is going to be 4. This is going to be 10 and this is going to also be 10 and then the border not a perfect. So now, and we want the background to be white. All right. Now we've got a uniform design as above. So the design aspect here has been completed.


Let's continue on with the functionality. So we did a little speed up of the design. Now what we have do is we've got our top three up here. So this is going to be the top three runners, if you will, in the leaderboard. So what we have to do is we have to add a dataset to pull from the database to display the top three. So what we're going to do is we're going to go to this data button. We're going to go to add data elements, and we're going to add a dataset. Once we've got our data set in here, what we're going to do is we're going to double click on it. We have to choose and connect it to a collection, and we're going to connect it to the leaderboard database. We're going to name this Leaderboard Top, and then we want this to be read-only. And now this is a key part right here. Number of items to display three. We don't want it displaying a whole bunch more. And then just repeating down the page. We only want the top three to be displayed here.


So we're going to choose three right there. And then we are also going to add a sort to this dataset. We want to sort total points and we want it to go from high to low. So it shows the highest of the left, lowest to the right. And we're going to add a sort there. So now we've got our data set for the top portion. What we have to do now is we have to go in here to our element and we have to connect it to its proper field. So we're going to choose the dataset. We want this to connect to leaderboard top the image source connects to profile picture, and I'm going to do link connects to YouTube URL. Then right here, we've got full names. So we're going to connect it to the data. Text connects to full name. Then the YouTube icon. We're not going to do image shores, cause we've already got the image here, but we are going to do link link, connects to YouTube URL and that'll link it directly to the YouTube URL. And then lastly points. And we're going to come up here connected to total points show that'll have in running total.


So essentially we now have our top portion of the leaderboard set up. So this will display the top three, the first person, or like the top user top leader will have the number one spot on the left. And then according to points, we'll go down to the right. Since we added that sorting feature, we now have to do the same thing for the bottom. However, we need a new dataset because we want this data set to display everyone. So we don't want it to stop at three.


So what we have to do is we have to go back to data, add data elements, add dataset. And then what we're going to do is we're going to come over here. We're going to double click it. We are once again, going to connect it to the leaderboard database. We're going to choose the name of this one to be leaderboard a lower. So it's the lower section of the leaderboard. Under the top three, it's going to be read-only and number of items to display here. I'm just going to put a thousand just to start. You can choose how much you want here. If you start getting a crazy amount, you're gonna probably have to add Pagination to your leaderboard. I'm not going to show that in this particular video, but that's where you add like page one, page two, page three of the leaderboard. I also added a search function on my leaderboard. I'm not going to show that in this particular video, we're focusing directly on the functionality of the leaderboard here. Although I will do an additional video on the search functionality. If you'd like to see that as well.


Once again, we are going to add a sort, we want to soort total points and we want it from high to low. So the top person on this first slot here will have the highest amount of points. And it'll go down according to obviously the sorting and the points . And so now we go ahead. We add that. And just like we did up top, we have to connect the elements. So this is our profile picture. So we have to connect it to leaderboard, lower image source connects to profile, picture link, connects to YouTube URL. Then we've got our full name here and we want this to connect to full name. Then we've got our YouTube icon. We're going to connect to data and this will connect the link to YouTube URL. And then lastly, we've got our points. We will connect to data and this will connect to total points.


So now we have officially set up the functionality behind the database and the dynamic page. All we have to do now is add some testing data to our sandbox database to test it out. So I'm going to come up here to data. I'm going to go to our database and I'm going to come in and add some test data. So full name, Michael Patrick Strauch. Profile picture, let me go pull one. Where is this good looking man here that they call MPS. Let's pull that one right there. Perfect. Add to page a YouTube URL. I'm gonna, I'm just gonna go grab it quick just so we can experiment. I can show you that it works correctly.


All right. A video of, mine's probably going to play here in a second. I'll grab my YouTube URL. Perfect. I'm going to throw that in right there. And then let's just say, I have total points right now of 237. I'm not going to add an additional field. I want to test the top three. I might even add a fourth. I'll just name this one MPS clone. I'll choose a different profile picture. I'll come in here, Wix. And the reason I do this guys and when, why you should also do this is you want to test to make sure stuff works.


So just use some test data. Be funny if you want, like here here's picture of me standing next to a cone that says MPS while I was in Boston this summer. I come up here, I'm going to add the same YouTube URL for this purpose. And then I'm purposely going to add less points. I'll just say I have 207 points here. And then I'm going to name one, a Tack Paddington. For those of you that don't know we've got unique nicknames between my girlfriend, my family, her family. So unique nickname here. I'm just going to come up here. I'm just going to name or just go college. Because her and I are both in college. I'm going to pull all results. If you didn't know which offers some free Wix images, I'll just pull female student with labs. Todd, once again, I'm going to add the same YouTube URL and this time I'm going to add less points than before. And then just for a final one, I'm just going to come in here and name it. I'm Bob Tall. And then I'm going to come in here and look for male. And this will be Bob Tall, the smiling businessman. And then he will have a 147 points.


Now we have four data points here to test and see. So that way we can test our top three and test our bottom repeaters to make sure it's working below as well. So we're going to come into here and just so you know, the bottom repeaters will also display the top three from above. They'll just be the top three slots on that bottom one. And then the rest will follow.


So if we come in here now and we press preview, let's see what we get. Perfect. There we go. Here's our leaderboard. It shows that I'm at the top. That was just getting shows me I'm at the top shows MPS Clone is behind me shows Tack Paddington is behind me. And then if we scroll down, we see same thing, leaderboard and Bob Tall is at the bottom of the 147 points. We can test, we can click YouTube and voila, it's going to take me to the YouTube channel that was linked and the rest is looking good. If we click the picture, it'll take us the YouTube channel, just like we linked. And it looks like we're solid and set. And that's the leaderboard.



Conclusion


So if you're part of Wix Nation, you just watched this video. I think it's time for you to go get on the leaderboard, which means you need to comment down below. And if you weren't the first comment and you got beat to it, I'm sorry, but try to be the most helpful comment out there, helps them, other people down in the comments section. And at the very least just comment how you enjoyed this video. And if you like this new idea of a Wix Nation leaderboard, and if you think we could have some fun and creativity drawn with this. Because I see a lot of opportunity here.


I hope this video helped you out. In fact, if did make sure you drop a like down below and hit that subscribe button in the bottom, right? So you can do more fun things like the Wix Nation leaderboard, and learn to build a whole bunch more in Wix and turn those bell notifications on alongside the subscription. And you'll instantly plug into 30,000 plus entrepreneurs just like me, you and the person in California, because Wix just released the top five cities emerging in Wix in the United States. And it's like LA, Chicago, New York, Houston, and Miami. Those are the top five.


So if you're in one of those places, cool, you're emerging in Wix. But go ahead and join a whole bunch of people just like us. And let's have a fun community interaction here. I'm excited for it. And head over to wixmywebsite.com, no strings attached, click, join the Academy and get instant access to a whole bunch of training content.


All right, guys, that's it for today. I hope you go out and build your leaderboard and you enjoy it. Do remember the wave. This is built right now. It requires manual entry on your part as an admin, but that's okay. It might be a little bit of admin entry at first. You can hire an assistant or even find people on Upwork and Fiverr to help you out as well. And that's what we've got rolling for today's content. I'll catch you back on the next one. The next time you see a video from me, I'll be back home in Arizona and I will be complete with finals.

1,760 views3 comments

Recent Posts

See All
bottom of page