SEPTEMBER 2017 UPDATE
If you’re running Axure RP 8, check out the links below for our new, updated repeater tutorials.
Repeater Basics
[ol]
[li]Basic Repeater – Dynamic Table
[/li][li]Sorting Repeater Rows
[/li][li]Filtering Repeater Rows
[/li][li]Add, Delete, and Update Repeater Rows
[/li][li]Marking Repeater Rows
[/li][/ol]
Advanced Repeater Techniques
[ol]
[li]Advanced Repeater – Product Listing
[/li][li]Repeater Reference Pages
[/li][li]Advanced Repeater Filtering
[/li][li]Repeater Pagination
[/li][/ol]
[i]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.[/i]
What is a Repeater?
There are 2 parts, drag a repeater onto your wireframe and double-click to begin editing.
-
Repeater Items (Dataset) can be Text, Image (Set Image), Page (Open Link).
-
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.
Conditions
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.
Setting Images
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.
Repeater Formatting
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.
Next: http://www.axure.com/forum/v7-beta-repeater-widget/7969-sort-filtering-repeater.html
repeater-examples.rp (248 KB)
