Repeaters

A repeater takes a symbol and renders an instance of that symbol for each row of data in a table. Each instance of the symbol can have different parameter values, based on the data in the given row.

This page covers steps to make a simple repeater using the group component. You can also create repeaters for view decks, Google Maps, map groups, and data grids. A similar effect can be created for the markers, bars, or columns in a chart using an Item Renderer.

DGLux5 also features a Raw SVG Repeater that repeats an SVG instead of a symbol.

A repeater created using a group component in DGLux5

More video tutorials are here.

These steps show you how to create a simple repeater using a group component. In these steps, you will use a Table dataflow block and a symbol.

1. In the Document window or Outline, right-click the Stage and select Insert > Components > Group.

   

2. Right-click the group and select Dataflow.

   

3. Drag a Table dataflow block to the dataflow window.

   

4. Click the button for the data property to open the table, and then edit the table so that it appears similar to the image below.

   
   

   In the image, the first column contains integers, and the second column contains hexadecimal color codes. For help, see Enter Data in a Table Dataflow Block.

5. Without closing the dataflow, select the group in the Outline.

6. In the Property Inspector, under Repeater, bind the table for your repeater to the Data property.

   

1. Create a symbol for your repeater:
   1. Right-click the Stage, and select Insert > Components > Text.
   2. Right-click the text component that you added, and select Convert to Symbol.

   3. Name the symbol symbol, and click OK.

      

2. In the Symbols panel, select symbol. Then, right-click symbol, and select Edit.

   

3. In the Outline, right-click symbol, and select Edit Properties.

4. In the Symbol Parameters dialog, drag one number and one fill to the right-hand panel.

   

5. Bind the number parameter to the Text property in the Property Inspector.

   

6. Bind the fill parameter to the Fill property in the Property Inspector.

   

7. Close the Symbol Parameters dialog, and then click OK to close the symbol editing dialog.

   

1. In the Outline, select the group, and ensure that the group's Layout property is set to Horizontal or Vertical. You might also want to set the Wrap property to Wrap.

   If the group's layout is Absolute, all the symbol instances will appear at the same location in the group.

   

2. In the Property Inspector, under Repeater, for Symbol, type symbol.

   

3. In the Outline, select the "renderer" node that is a child of the group.

   

4. With the "renderer" node selected, click Dataflow to open the dataflow for the group. Then, select the Table dataflow block, and click the button next to the data property to open the table.

   1. Drag the v1 column header to the number property, and the v2 column header to the fill property.

   

You have created a repeater that shows one instance of the symbol for each row of data in the table.

You can control other components in your project based on the user's selection of items inside the repeater. To do this, you can use the group's Selection properties. In this example, you will add a Single Select behavior to a repeater, and create a text component that displays the currently selected value. In these steps, you will use a Table Row Cells block.

Follow these steps after you create a repeater in a group component.

In the same .dg5 file as your repeater:

1. Right-click the Stage in the Document window or Outline, and select Insert > Components > Text.

2. In the Outline, next to the group component that contains the repeater, click the Dataflow icon.

   

3. In the Blocks Palette, expand Table Operations, and drag a Table Row Cells block to the dataflow.

   

4. Bind the table that is driving your repeater to the input property of the Table Row Cells block.

   

5. With the group selected in the Outline, expand the Selection properties, and set the Selection Behavior property to Single Select.

6. Bind the Selected Index property to the Table Row Cells block's row property.

   

7. For the Table Row Cell block's column 0 property, enter the name of one of the columns from the table that is driving the repeater.

   

   If a repeater item is selected, the Table Row Cell block's value 0 property automatically updates when you specify a column 0.

8. Without closing the dataflow, select the text component in the Outline.

9. Bind the Table Row Cell block's value 0 property to the text component's Text property.

   

10. Change to Preview mode, and test your repeater by clicking. The text component's contents should update depending on the items you click inside the group.