© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

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.

MORE RESOURCES

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE

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.