Moving one repeater item to a different position in the list

advanced-prototyping
repeater-widget

#1

Hi together, I don’t have a file that I can share. So let me describe:

There is a repeater with 7 rows.
And there is a widget outside of the repeater.
As soon as an action / interaction is completed on the widget row 2 of the repeater suppose to move to position 6. While row 3,4,5 move one row up. The movement should be visible, so that a user can see that it moved.

Can I do this with a repeater?

Thanks!


Moving card animation - adding and subtracting cards from a grid
#2

I can get things to sort and reorder but I can’t seem to work out the animation. Have you considered making it in After Effects then converting that .mov to a .gif?


#3

EDIT: The .rp file has been updated to fix a few bugs and a full description of the approach is included here.

gestalt,

Try this and see if it works for you.

RepeaterSorting.rp (106.7 KB)

Here is a description of what’s going on. It builds on the approach from mnearents in this thread:
Drag and Drop Reorderable Repeater , applying the same logic to a single click of a widget (instead of drag & drop.)

The repeater has a number (Item.Num), a text label (Item.Name), and a “Move To Bottom” button (moveToBottom group). You can see the buttons for “SORT BY NAME” and “SORT BY NUMBER” for examples of basic repeater sorting, and “MOVE 2 TO 7” for an example of swapping two rows with each other. These buttons also employ a basic “hide and show” animation to show the list changing. That might be enough to satisfy the “movement should be visible” --I doubt it, but that’s about as far as you can go “animating the repeater” itself. To go beyond this, you need to use something like the “item clone” method from mnearents. More on that later.

Gestalt, I’m not sure if you mean to move row 2 to the bottom (“position 6” if you start at 0 ), or one from the bottom (if you start at 1). To test out the ability to move a row from any starting position to any ending position, I made the “Quick Move” feature. This works well, but no animation yet.

To show a row item moving, you have to “fake it” by showing an identical copy (or “clone”) of everything in the repeater cell and moving that clone from position A to position B. Then sort the list and hide the clone. To make this effect a little cleaner, I also move and show a “mask” over the row to be moved so that row slot appears empty while it is being moved. You can test this out with the “Animated Move” feature.

Initially, the “GO” button is disabled until you select numbers in both droplists. When a number is selected in the Move droplist, a global variable, tempIndex is set–this is a placeholder for “move from this position”. When a number is selected in the To droplist, a global variable, tempTo is set–this is a placeholder for “move to this position.” The “Move To Bottom” text is also updated to show the target “to” position.

Now, the code on the “GO” button should say something like, “click the ‘moveToBottom’ widget in row 2” except Axure doesn’t provide the ability to do this. Calling one repeater widget from outside a repeater will trigger that event in all the repeater rows. This would mean each row would try to move itself to the “To” row and it would crash. So, the code for the “GO” button is “Rotate moveToBottom by 0 degrees” --which doesn’t actually show any rotation, it is just a trick to remotely trigger some special code for that widget group in the repeater cell by calling its OnRotate event. That event will in turn trigger its own OnClick event, but only if its index (Order) matches the “move from this position” number (tempIndex). All of this is a workaround to click something in row 2 (if ‘2’ is selected in the “Move” droplist.) All the other rows will ignore the OnRotate event.

OK, so what happens when you click “Move To Bottom” in the repeater? Well, it first tests if the tempTo variable has been set. If not, it sets it to “Item.Repeater.itemCount” (meaning the last item in the repeater, or the “bottom of the list”). If you have first set a “To” position from the droplist, it will use that as the target row position. It then sets the content of the hidden clone item to match its own content, moves the clone and the mask to its own (x,y) location, shows them, then moves the clone to the (x,y) location of the target “move to this” row. This leaves the mask covering up the actual row item so it looks like that row slot is empty. Once the clone has moved to the correct location, the repeater is updated so the intervening row numbers are updated (e.g., “row 3,4,5 move one row up”) and then re-sorted. Then the clone and the mask can be hidden and moved off the repeater. In order to determine which rows need to be updated, the “Num” widget in the repeater is “rotated by 0” --so that it tests itself against the move boundaries (if it is greater than the “move from” number and less than the “move to” number, then its position must be updated. In the example where row 2 gets moved to row 6, row 1 doesn’t need to change; row 2 will change to 6; rows 3 through 6 need to be decremented by 1 so that they will then be 2, 3, 4, 5; and row 7 doesn’t need to change.)

If you don’t want to show the row numbers, you can hide the Num widget in the repeater, but don’t delete it or this will all break. If you don’t want the “Move To Bottom” widget group, either hide it or copy its code to the widget and event of your choosing. If you don’t need to change the “move from” and “move to” destination positions, then you can make these fixed numbers, use global variables or hidden text objects to store these. If you always want to move a row to the bottom only, then you can just delete the whole “Animated Move” set of widgets.

Best wishes and good luck!


#4

mbc66 WOW! This is amazing! Yes, that is what I had in mind. I will try to make it work on my file and let you know :smiley: thank you!!! gestalt


#5

Crap! I thought you were looking for smooth transitions.


#6

Is there a way to do this without the dropdowns that determine which position to move it to? I have a repeater with a menu in each row that has “move up” and “move down” options. When you hit “move up,” it should move up one spot, and when you hit “move down”, that item should move down one spot. I can’t figure out a way to do this.


#7

It’s not so hard.
step0: add a new column named “sort” and fill in right order eg:1 2 3 4…, if you already have skip this.
step1: add sort by “sort” column as Number asc when repeater loaded.
step2: new click or tap interfaction on “move up”, three things below.
step2.1: update “sort” column of current row minus 1.5 [[Item.sort-1.5]]
step2.2: wait 0 ms
step2.3: update “sort” columns of all rows equal to [[TargetItem.index]]
step3: copy “move up” interfaction to “move down”
step3.1 modify step2.1 => update “sort” column of current row add 1.5 [[Item.sort+1.5]]

moveupdown.rp (55.8 KB)
reupload axure rp8 format.