Repeater

The Repeater component loops over the contents of an array attribute and, for each item in the array, outputs the specified elements and components. A Repeater component requires an array attribute.

Note: the Repeater component is only available in Wicked Block Builder Pro.

Adding a Repeater to Your Block

To add a Repeater, first add an Array attribute to your block. The array attribute will hold the items that your repeater will loop through. Add a child attribute for each property that you want the items in your collection to have.

For example, let’s say you’re creating a block that displays a list of people’s bios. For each person in the list, you want to have a way to enter the person’s name and bio into the block. Create an array attribute named “people”. Then add two child string attributes to the people array attribute, one named “name” and another named “bio”. This way, each item in the array will have a name and bio.

Once you’ve set up your array attribute, you can add a repeater to your block. On the Editor-View or Front-End View screen, click or drag the Repeater component to add it to your block’s structure. Click the repeater to select it and choose the attribute you created for your repeater from the Attribute dropdown.

Adding Elements and Components to the Repeater

To add HTML elements or components to your repeater, simply drag an element or component so it’s indented under the repeater. The repeater will output the items indented under it for every item in the associated array attribute.

Note: if the attribute dropdown is empty for a component within a repeater, you either forgot to assign the repeater to an attribute or the attribute assigned to the repeater doesn’t have a child attribute matching the type required by the component.

Using the Repeater

Add your block to a page and select it. The block’s toolbar will display a button for each repeater in the block. By default, the button displays the name of the attribute associated with the repeater next to an infinity icon. Click the button to access the repeater menu. Click the Add Item button to add an item to the repeater. Drag and drop items within the repeater menu to re-order them. Use the trash can icon to remove an item.

Adding Labels to the Repeater

By default, the name of the attribute associated with the repeater will be used as its label. You can override this though by going to the repeater’s settings and expanding the Labels panel.

Use the Label field to specify the text that will appear for the repeater button in the block’s toolbar.

Use the Item Label option to select an attribute to use as the label for the individual items displayed in the repeater menu. Returning to our earlier example, you could select the people.name attribute to display the person’s name instead of Item #1, Item #2, etc. This makes it easier to know which repeater item you’re sorting or deleting when working with the repeater menu.