Coding with Velo: Repeaters

In this lesson, we're going to learn about repeaters, what they are and how you can use them.

You have a list of items that you want to display on the page in a nice, neat, orderly fashion, a repeater can help you do that.

Now, repeaters can have data that go through them dynamically or statically, and throughout this course, we're going to be showing you how to do both of those.

So a repeater is a list of items that are visually set that you can display and also have multiple items that repeat.

So let's just say that I want to display a list of employees that I have working inside of a job.

Based on the screen here, I can have a list of people that have the same design, their names are in the same font, and even when I do bring in some more elements into the page, or onto the repeater, the elements will repeat for all the other lists of items, keeping the design the same.

So if I add this button to the first repeater here, and I attach this item, all the other repeater items are going to get this.

Now, this brings us into learning about the repeater structure.

So repeater, like I said, is a list of items visually that we can put nice and neatly inside order.

So if I drag and drop here, every other item will follow.

So we can even go here and expand our repeater a bit, above the space of these boxes as well.

So let's open up this container.

Move it down, and you'll see that every single item is going to follow the design right after this first item.

Now repeated can store dynamic data and static data.

So throughout this course, we're going to learn about using third-party services to populate a repeater, and even static data that you have stored right on your frontend code.

So to learn about these repeaters throughout this course, you're going to have to have some experience with the backend, and also frontend development.

So I encourage you to watch those two other courses for frontend and backend.

Now, let's get rid of this button, and we're going to go over the repeater again.

So a repeater can be populated in a few different ways.

So you can do this programmatically, or you can even work with the dataset and Content Manager as well.

Now throughout this course, we're not going toa be talking about the data setting and the Content Manager, we're going to be focusing primarily on the code.

Now, I can just drag and drop a repeater onto the page, and I can also id this repeater.

So if I go here and I open up my code panel, once I have dev mode on, I can just select this repeater and actually change the name.

So my planet repeater is a page element in itself, but it contains many other page elements that then repeat themselves.

So I can list my items in a nice, neat fashion.

There are a few event handlers that I can add to repeat.

I have "item onReady", "item onRemoved", "mouseIn", "mouseOut".

And throughout this course, we're going to be showing you how to use "item onReady", "item removed", because these are going to be the main functionalities that you're going to be using to display your data on your repeater.

So in our next lesson, we're going to be learning about how to add static data to your repeater, like how you kind of see here on our id right now.

And we're going to show you exactly how to import all that data straight into a repeater.

So we'll see in the next lesson.