HTML5 Data Bindings Extended Repeater Manual

Advanced: Creating Custom Repeaters

In this tutorial we will show you how to create custom repeaters using HTML5 Data Bindings Extended Repeater and HTML5 Data Bindings Formatter.

*You can also check out the video.

How to do it

1. We created a simple two column layout. We want to use the same data source in order to display products that belong to two different categories - Motorcycles and Planes. This is very useful as you can reuse the same data source on your page as many times as you need. Click inside the first column (1), select repeat regions (2) and click add new button (3).

2. In the HTML5 Data Bindings Extended Repeater window, add a name for the repeater (1), select your data source (2) and click the dynamic data button (3).

3. In the HTML5 Data Bindings Field Pickup window, select the [data] repeating element of your data source (1) and click Format Data Bindings icon (2).
   

4. In the HTML5 Data Bindings Formatter window, select collections (1) and choose where filter (2). We want to filter our products by the productLine column (3) and choose the == operator (4). We also want to show only the products that belong to the Motorcycles category (5). When you're done, click add button (5).
   

5. Click Ok button.

6. And again...

7. And again...

8. Click inside the custom repeater that we added (1), select the data element that you want to show in the repeater - we use the product name (2) and click insert button (3). We do the same for the Planes column, this time using "Planes" as a value for the where filter.

9. Now you can save your work and preview the results.