Sort & Filtering the Repeater

repeater-widget
#1

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]

Once you have some data and a basic understanding of how the repeater works, we can add some functionality for filtering/sorting the data in our generated wireframe.

I’ve set up a basic 3 column dataset. On the page where the repeater exists, I’ve added 3 basic rectangles.

Add Sort

Next I’m going to add an OnClick to the button I’ve placed above the name column, and add the action “Add Sort”. I’ve selected the repeater, given the action a name, and selected the appropriate sort properties in the droplists. Make sure you specify “Sort as text”.

repeater-sort-action.gif870×565 64.9 KB

Next I repeat this process for the middle column, but this time choose Favorite_Food as the property. For the last column I choose “Number” for “Sort as”.

Add Filter

To add filter, you add actions to a widget similar to a widget. I’ve added a rectangle with the text “Filter less than or equal to 3”.

Next, I’ve added an OnClick event with 2 actions.

  1. Remove Filter (All) - I’ve added this because if we add multiple filters, we’ll want them all to remove the previous filter each time.

  2. Add Filter - I selected the checkbox for my repeater and then named the filter “less than equal to 3”. In the query I’ve added [[item.letters_in_name <= 3]].

repeater-sort-addfilteractions.gif871×566 73.7 KB

Bonus: If you wanted to add a filter of between two numbers, you use this query…
[[item.ColumnName >= X && item.ColumnName <= Y]]
repeater-examples-sort-filter.rp (58.8 KB)

#2

Thanks for writing this up. Is there a way to perform a “begins with” query for the filter?

#3

Hey,
If I add a Filter to the Widget Interaction the page will not load.
But I add the Filter to the Page Interaction it works fine.
Is that wanted behavior?

Cheers
l.

#4

That should work, see my screenshot. 2013-07-02_1453 - AxureSupport’s library This is working fine for me, maybe post your file in the bug section?

#5

Yes, will do. That’s the case and won’t work.

#6

Awesome … I have been waiting for this long time

#7

Just playing with your example, which leads to a ‘table’ with 2px wide borders as there’s 1px on each repeater.

I’m trying to decrease the dividing lines to 1px. I converted the shapes to have no bottom border, which works nicely, but I’m then missing one at the bottom.

Is there a way to treat the last item differently, or another way you can think of to do what I’m trying to do?

Thanks.

#8

I had the same problem and all I did was set the repeater widget at Y: -1.

If you want the side borders to look like 1 px then just moved the shape to the left 1 px so it overlaps the border of the other shape.

#9

Yeah, I figured out the side ones.

Ah yes - you can add the top border manually, but you won’t necessarily know where the bottom one will be.

So instead of y: -1, you can use the U-shaped rectangle shape that has no top border and add a horizontal line for the top one.

#10

Hi, I know it has been already asked but there wasn’t any answer. Is there a way to perform a “begin with” or “contain”.

That would be very useful to simulate a find as you type filter.

Thanks!

#11

I posted the solution at Want to filter using “begins with”?.

#12

The repeater is an awesome tool! I can’t figure out how to filter with checkboxes so that, for example, anything with an [[item.type]] of ‘Phones’ is remove when I deselect the checkbox. Any ideas? Thanks!

#13

see this Facets filters

#14

Thank you so much! This is exactly what I needed.

#15

Has anyone figured out how to do banded rows with the repeater?

#16

@ scrapperchick

[QUOTE][/QUOTE]

That’s how I created banded rows. Bit of a hack, but relatively simple, and someone might find an even easier way to achieve that.

I am attaching a screenshot of the final result and the repeater conditions, plus the .rp file.

The repeated item contains a grey rectangle in the background, set to hidden by default.
I’ve added one special “#” character at the beginning of the value in the first column, one every two lines.
Then I set a condition so that if the item that contains the character “#”, then a substring is displayed instead of the normal value: [[item.Name.substring(1)]]
By applying this javascript substring, the first character is removed (in this case, “#”).
If the character “#” is not there, then the normal value is displayed: [[item.Name]], and the grey rectangle is made visible.

This way I could potentially control the way I want to format each item in the repeater, when certain conditions are met, based on the values specified in the repeater items. I haven’t played with filtering and sorting yet, but I guess the limitation of this approach is that when the items are sorted differently or filtered out, then it would not work in all situations, and a different approach should be used. Would be nice to have an easy way to do it.

Note: the line at the bottom of the repeated item is a rectangle made 1 pixel high. Using a normal line would leave a few pixels of undesired padding in between the repeated items.

Final result.png466×525 75.6 KB






RepeaterBandedRows .rp (1.09 MB)

#17

Hey Luca,
ht

that’s a brilliant idea - showing a grey bg. You can now simplify it a bit. I added an ID column:

…and used the modulo operator to check for even/uneven numbers:

Cheers
l.





#18

That’s cool, I was wondering how you identify odds/evens in javascript.

unlisted #19