Sorry for the lag–didn’t see your replies until today. Wow…lots going on in your prototype… and I kind of went down your rabbit hole… ended up needing to change quite a bit, learn some new things and invent others to get this to work at all. Still could use some improvements, but it’s a start.
See the v2 page in this updated .rp file:
moverow.rp (866.1 KB)
- This makes sense, but there is an easier and more reliable way to do this. Essentially you only need one widget and just toggle its selection state with OnClick. I wouldn’t have bothered changing this, but you had same kind of dynamic panel (dp) checkboxes in all the repeaters which makes everything less efficient and harder to code. If your “checkbox” widget is a custom image (like your white checkmark on a green circle) you can create an image for selected and unselected states (even mouseOver, mouseDown and disabled) and set your image for each interaction sytle. Or if you are using Axure widgets or multiple widgets/images, you can style the topmost widget for selected and unselected and get it to look right.
-
I created a “Delete Rows” button to test this out and ended up making it an integral part of how the “Move Rows” button works. If you don’t want users to be able to use this to delete multiple rows, you can hide this button, but don’t delete it.
-
For your “Move Rows” button, there are two basic operations for each row to be moved:
- Add a row to the second repeater, using the same data as the row in first repeater.
- Delete row in first repeater.
-
In Axure code, you can copy text, but not widgets like shapes, images, file URLs or pointers to image files, so I changed the way the icons are represented in your repeaters. They are now dp’s with a shape or image in each state. The repeater columns for these (Icon_1, Icon_2, and Action) specify which state to show (and the text in these columns must exactly match the name of the dp state.) Look at the repeaters’ OnItemLoad event for details.
-
Copying the data in a repeater row is best done inside the first repeater, because it has access to all of its own data. To build this out, I created an “action icon” which looks like a phone+arrow (to move things from “To issue” to “Calls expected”) Replace with whatever icon makes sense to you. So, when a row is selected, the “IconAction” dp is changed to the “Move” state. Clicking on that action icon adds a row to the “Calls expected” repeater then deletes its own row. There are brief animations to communicate this action to the user. See the code on the “ToIssueMove” group inside the IconAction dp inside the “To issue content” repeater:
-
In that “Add Rows” statement, each column in the “MarginCalls-Callsexpected” repeater is set to the column data in the current row, like this:
-
Once the new row has been added to second repeater, the current row is deleted. The Hide statement provides a visual cue that it is going away–otherwise it can be hard to notice it pop off the stack.
-
The “Fire OnLoad …” statements are a way to trigger your count numbers (to left of tables) for each Tab. For example, you initially have 49 rows in the first tab (repeater) and 12 in second tab. When a row is moved, the counts are updated to 48 and 13. Notice also I changed the way you set “Loading” to a number (the item count in each repeater). Instead of doing this in the OnPageLoad event, it is now done in the OnLoad event for each repeater. This is a more reliable way to get these counts and allows the counts to be easily updated at any time.
-
So, all this works well for a single row at a time. I initially tried to do the same approach for multiple rows (When the blue “Move Rows” button is clicked) by just calling the “Fire OnClick” event for each row’s “Move” icon group. It worked when only a few rows were selected but failed when all rows selected (on my system, more than 5 or 6 rows). Actually, all the rows were copied to the second repeater properly, but not all rows would be deleted from the first repeater.
-
I had to create a different way to move multiple rows… I thought it would be better to first move all rows, then once that was completed, delete all the selected rows. I copied the “Add Rows…” statement to the OnMove event for the same icon group and call that from the “Move Rows” button. So, if the phone+arrow icon is clicked, just that one row will be moved, but if that icon is moved, it tests whether the row is selected, and if so, adds a row to the second repeater. Only one statement and no animation to make it faster. However, Axure doesn’t provide an easy way to determine when a chain of actions like this are completed (every phone+arrow icon is moved, if selected, it adds a duplicate row). Waiting for N ms doesn’t cut it because it tends to get slower as more rows are selected (and as content in the rows is more complex). Also, as this was taking 5–10 seconds to complete when all rows are selected, clicking on the “Move Rows” button looked like it was doing nothing. I added a busy-spinner GIF, named “busyMove” for user feedback and noticed that it would not show when the button was clicked–until the repeater actions were completed, even when it was the first statement in the OnClick event, before the “Add Rows” statement (at least on my system with Chrome browser on Windows). Thus, the code is prioritizing the repeater stuff over showing/hiding an image. My plan for good user feedback was foiled, but–AHA!–I stumbled upon a way to determine when all the “Add Row” actions had completed. To show the busy-spinner first, I do this with the OnMouseDown event, then my “Add Row” code and Hide busy-spinner with the OnMouseUp event. In the OnHide event of the “busyMove” image, it calls “Fire OnClick” for the “Delete Rows” button. The result is the busy-spinner is shown, then the repeater adds rows and when completed, the spinner is hidden and the initial rows are deleted.
It is all still fairly slow, likely because you have so many complex repeaters on one page here. If you select all 49 rows and move them, it may be a hit-or-miss situation whether it actually works or you get a stall or “unresponsive page” error in your browser. There may be a better way to move each selected row one at a time (using the isFirst, isLast and isMarked variables) which would be slower but more reliable.
I added a few things to the tabs on the left so I could keep track of which repeater was active, and probably some other things I can’t recall now. Let me know if you have questions on any of this…
