Axure 7 –Repeater Review
Shira Luk-Zilberman
UX Designer | Israel
August 8, 2014
Agenda
•
•
•
•
•
•
Repeater Overview
Basic Stuff Lists and Formatting
More Features Images and Paging
Dynamic Changes Sort, Filter, Add / Delete
Advanced Stuff Axure Forum
Summary
The Pain
• Duplicating widgets
• Tables and lists
• Usability tests
The Solution?
The Solution? Use a Repeater!
What we’ll see
Before we dive in…
Before we dive in…
What’s the big idea
• Repeater = list of items + one template
• The template repeats for each item
One Template
List of Items
Template repeats for each item
Template repeats for each item
Putting it all together
Now let's dive in…
Drag a repeater like any widget
Default setup: repeater with 3 items
Double click to edit
Design Area (like Dynamic Panel)
Three setup tabs
Three Tabs at the bottom
Basic Example
Basic example – Canvas & Dataset
Basic example – OnItemLoad
Basic example - OnLoad
Basic example – Set Text
Basic example – Set Text
Basic example – Set Text
Basic example – Set Text
Basic example - OnLoad
Basic example
Basic example – let's see it live
Basic Example - Formatting
Basic example – Formatting Tab
Basic example – Formatting Tab
Formatting - let's see it live
Images
Images - Canvas
Images - Dataset
Images – OnItemLoad
Images
Images - let's see it live
Paging
Paging – Items per page
Paging – from outside the repeater
Paging – from outside the repeater
Paging – Set current page
Paging - let's see it live
Sorting
Sorting – from outside the repeater
Sorting – from outside the repeater
Sorting – Add sort
Sorting – Add sort
Sorting - let's see it live
Filtering
Filtering – Add Gender Column
Filtering – Gender Dynamic Panel
Filtering – OnItemLoad Condition
Filtering – OnItemLoad Condition
Filtering – OnItemLoad Condition
Filtering – from outside the repeater
Filtering – from ou
Filtering – Add filter
Filtering – Add filter
Filtering - let's see it live
Hmm.. Where have we seen this?
• ebay Search Results
Add Items
Add Row – from outside the repeater
Add Row – from outside the repeater
Add Row
Add Row
Add Row – from outside the repeater
Add Row – from outside the repeater
Add Row – from outside the repeater
Add Row – from outside the repeater
Add Row – from outside the repeater
Add Row – from outside the repeater
Adding - let's see it live
Delete Items
Delete Row – from within the repeater
Delete marked row
Delete marked row
Deleting - let's see it live
Examples from the forum
When should we use a repeater?
When should we use a repeater?
• Repetitive Action
When should we use a repeater?
• High fidelity prototypes
When should we use a repeater?
• Exploring real data
When should we use a repeater?
• Reusing design patterns
So why not just write code!?
• Code is better when you know what you are
building
• UX design is all about iterations
• Integrated with the rest of Axure
• Faster to learn
Takeaways
• Realistic interface, fast to build, easy to
maintain
• Mastering the repeater will take time
• But it's worth it!
Axure 7 - Repeater Review
Shira Luk-Zilberman @
Shiraluk @
RP File + PPT File
Axure 7 - Repeater Review
Questions?
Shira Luk-Zilberman @
Shiraluk @