In this course
Accelerate your development velocity with repeaters and dynamic data, so you won’t have to manually update your static code. We’re doing a deep dive into repeaters - what they are, how they’re structured, how to format and populate them with data and how to update and modify them - to help you code smarter and faster with Velo.
Learn how to
Create, delete, format, add, modify and update repeater data
Create your own custom list of items using code
Make and format dynamic repeating layouts and add custom functionality
Connect repeaters with Wix APIs and other frontend, third-party APIs
Joshua is a digital creator and developer advocate for Wix.com. He’s passionate and excited about problem solving, creating music and teaching developers how to be successful online.
Wix Developer Advocate
Who it’s for
Experienced developers who want to use repeaters with code
Developers who are experienced with repeaters and are looking to deploy them using Velo
Resources to help you grow
Get helpful articles, practical templates and more to put your skills to work.
Get started with 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.
Prep for your exam with free video courses and lessons