[00:00] In this lesson, we're going to be talking about the Flex Repeater. The Flex Repeater has layout settings like a Flex Container, except it allows you to display multiple instances of a single view instead of adding components. Now I already have a view created that we can use so let's take a look at it. This small view just has a great background and a label component on it and the label component is just bound to the display parameter here so we can pass information in. Now let's go back to our main view and we'll add a Flex Repeater. I'll go to my perspective components and I'll filter it out and I'll grab a Flex Repeater and drag it onto the screen. Now the two main properties of the Flex Repeater component are the path and instances. The path property allows you to select which view will go into your Flex Repeater. I'll select the small view and hit okay. Now you'll notice that the small view didn't actually appear but this is because the instances property controls how many instances we have.

[01:07] I'll click on the add array element button here and you can see an instance populates in the Flex Repeater. Now you'll notice if I go and change the size of my Flex Repeater, it won't actually affect the size of the view that's inside of it. That's because the Flex Repeater component is telling all the internal views to use their default view width and height. To allow the view to change size with the Flex Repeater, we just want to deselect the use default view width and use default view height. So let's add another instance to the repeater and go up to instances and press the little plus icon and you can see now we have two. And if we want to pass a parameter into the view, all we have to do is add a new parameter next to the instance number one and choose value. Now when I change the key to match the small view param, you can see that the text changes this to value. Now we can pass any parameter values into the views and that's pretty neat.

[02:03] You may have noticed that there are several style properties in the Flex Repeater and they're actually three places that you can set the style. So one is the instant style. So for each instance that's in the Flex Repeater, I can go and change the styles. So I'll change the background color here. We'll make it maybe something a light red, and then you can see that that particular instance is changing. We can also change the styles of all of the instances at the same time, by going to the element style property. And I'll add a margin to my views here, something like 10 pixels and you can see the margin applied to all of the views. Lastly, there's a style for the Flex Repeater and that's applied to the entire component. I'll add a border here, just something simple and you can see it goes around the entire Flex Repeater. The Flex Repeater also has alignment properties, just like a Flex Container. We can set the wrap property to be wrap. And when we do that, we also want to make sure and set the use default view width to true so that way, the components know how wide they're supposed to be.

[03:11] Now when we resize the Flex Repeater, you can see that the views will stack. We can also change the layout of the container so that we have a scrollable list of components. If I set the use default view height to true, and then I change the height of my Flex Repeater, then you can see that when there's not enough room, we'll get a scroll bar to show all the views. And you can even scroll through them in the design mode with the mouse wheel. This is great for showing many views in a small space. The Flex Repeater is great for showing a dynamic number of instances. To do this, we just need to fill in the instances property with the binding or script. Now I already have a database query setup, so we can just use that. Let's go to the instance property and click on the binding icon and we'll select a query binding type. Now I'll select my named query, get areas and then hit select.

[04:04] And I'm going to change my return format to JSON. Now I could leave it at auto but if you change it to JSON, then the instances property will look like we see under props. Now when we go and click okay, you can see that our three instances will show up. And if I resize my Flex Repeater, you can see them all at once. Of course, our named query could be much more complex. It could join tables and return many parameters to populate the view instances. We could also add components to our view like dropdown lists or entry fields to allow users to select which data they want the Flex Repeater to display.