© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.
STEP 0: DOWNLOAD THE REPEATER TRAINING FILE
If you don't already have it, download AxureRepeaterTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials in the Axure repeater training module.
BASIC REPEATER - DYNAMIC TABLE
Add rows and columns to a repeater dataset and enter data into cells. Display the dataset's values on widgets in the repeater item to create a dynamic table.
If you aren't yet familiar with the repeater widget, you can read about its functionality and uses in our Repeater Widgets reference guide.
STEP 1: SETUP
In the repeater training document, open the page named "Basic Repeater - Dynamic Table". On the canvas is a group of widgets called "Dynamic Table". The group includes four rectangle widgets that serve as the table's headings and a repeater widget with alternating row colors that serves as the table's body.
STEP 2: ADD NEW DATASET COLUMN
In the repeater's dataset, scroll to the right until you see the "Add Column" heading. Click the heading and type "Available". Then, press [Enter]. This will create a new dataset column.
To add values to this new column's cells, select each cell in turn and start typing. Add a value of either "Yes" or "No" (without quotes) to each cell in the "Available" column.
STEP 3: DISPLAY COLUMN DATA ON THE CANVAS
To display this column's data on the canvas, we'll need to use it to set the text on a widget in the repeater's item. To do this, we'll use the repeater's OnItemLoad event. The repeater already has a case set up under this event, so double-click "Case 1" under "OnItemLoad" at the top of the Properties tab of the Inspector to edit the existing case.
In the Case Editor, select the existing Set Text action under "Organize actions". Under "Configure actions", check the "Available" rectangle widget under "Employees (repeater)". At the bottom of the right column, click the "fx" button to open the Edit Text dialog.
In the dialog, delete the text in the top field. Then, click "Insert Variable or Function". In the dropdown that appears, click "Item.Available" under "Repeater / Dataset". Notice that "[[Item.Available]]" appears in the top field of the dialog.
Notice that the dataset contains three of the four columns that the table on the canvas does: "Name", "Department", and "HireDate". We'll be adding the fourth column, "Available", in the next step.
Also, notice that the information in the dataset's cells is displayed in the repeater on the canvas. This is done with the repeater's OnItemLoad case, which sets the text on three widgets in the repeater's item to the values in their corresponding dataset columns: the "Name" rectangle's text is set to "[[Item.Name]]", the "Department" rectangle's text is set to "[[Item.Department]]", and the "Hire Date" rectangle's text is set to "[[Item.HireDate]]".
Click "OK" to close the Edit Text dialog, and then click "OK" again to close the Case Editor. Notice that the values from the repeater's "Available" column are now displayed on the canvas.
STEP 4: ADD NEW DATASET ROWS
Now that all of the repeater's dataset columns are set up, let's add a few more rows to it.
In the repeater's dataset, scroll down until you see "Add Row" at the bottom of the first column, "Name". Click this cell and begin typing to add a new value. Then, press [Tab]. This will create a new dataset row.
Enter a value in each column for the new row, and then create a few more rows. Notice that the repeater on the canvas continually updates to display the new rows and data.
Let's begin by taking a look at the repeater's current setup.
Select the "Employees" repeater widget by clicking it twice on the canvas: one click to select the "Dynamic Table" group and a second to select the repeater itself. (Alternatively, you can select the repeater directly in the Outline pane.) Then, in the Properties tab of the Inspector, scroll down to view the repeater's dataset.