SEPTEMBER 2017 UPDATE
If you're running Axure RP 8, check out the links below for our new, updated repeater tutorials.
Advanced Repeater Techniques
- Basic Repeater – Dynamic Table
- Sorting Repeater Rows
- Filtering Repeater Rows
- Add, Delete, and Update Repeater Rows
- Marking Repeater Rows
- Advanced Repeater – Product Listing
- Repeater Reference Pages
- Advanced Repeater Filtering
- Repeater Pagination
Note: The screenshots below feature the Axure RP 7 UI. If you're running Axure RP 8, please see the links above for the updated UI.
What is a Repeater?
There are 2 parts, drag a repeater onto your wireframe and double-click to begin editing.
1) Repeater Items (Dataset) can be Text, Image (Set Image), Page (Open Link).
2) Item Wireframe
Put the text from the dataset into the wireframe using OnLoad -> Set Text on Widget = [[Item.ColumnName]]
The wireframe is repeated as many times as there are items/rows in the dataset.
You can also use Item.ColumnName in conditions. I've added a third column called 'letters_in_name' to signify the number of letters in each person's name, and given them all values. I've also added a 3rd shape widget to the Item Wireframe, and given it a selected style (blue fill).
What I'm going to do is set the lettersinname column to selected if the value is less than or equal to 3. Take a look at Case 2.
looks like this...
Troubleshooting: If you're having trouble with this make sure your Case 2 is an IF (Right-click to toggle IF/ELSE IF). Also make sure you've defined a selected style on your widget.
You can reference images as data as well. Right click on a cell and click "Import Image" to add the image.
Then use the action "Set Image", select the image where you'll be setting the image to, then enter the [[item.ColumnName]] variable as a value.
Let's jazz up the way this repeater looks. I've opened up the repeated and rearranged my shapes. I also added text to my widgets just so I can visualize the layout (this text will be dynamically overwritten with my actions).
Next, I want this repeater to go horizonally instead of vertically, so I will go to the Repeater Formatting tab and select "Horizontal". I also only want to display 3 items, and then wrap, so I enter that value as well.
Lastly, I want some padding between my rows and columns, so I enter a value for Row and Column padding.
Let's check out the result.
repeater-examples.rp (248 KB)