Axure 7 –Repeater Review

Shira Luk-ZilbermanUX Designer | IsraelAugust 8, 2014

• Repeater Overview• Basic Stuff Lists and Formatting• More Features Images and Paging• Dynamic Changes Sort, Filter, Add / Delete• Advanced Stuff Axure Forum• Summary

Agenda

• Duplicating widgets• Tables and lists• Usability tests

The Pain

The Solution?

The Solution? Use a Repeater!

What we’ll see

Before we dive in…

Before we dive in…

Not That

V

• Repeater = list of items + one template• The template repeats for each item

What’s the big idea

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

• ebay Search Results

Hmm.. Where have we seen this?

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?

• 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

When should we use a repeater?

• 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

So why not just write code!?

• Realistic interface, fast to build, easy to maintain

• Mastering the repeater will take time• But it's worth it!

Takeaways

Axure 7 - Repeater Review

Shira Luk-Zilberman @

Shiraluk @

RP File + PPT File

Axure 7 - Repeater Review

Shira Luk-Zilberman @

Shiraluk @

Questions?