Remember what buttons were pressed

Hi … can anyone think of how to record what button was pressed in what order in a prototype … so I can programmatically press them again in reverse order from which they were first pressed… . (A bit like an undo).

Keyboard buttons or buttons in the UI?

Here is a stab… I’ve wanted to do this in the past to provide a kind of user action recording, but there are better tools for that in general.

This approach works for a single instance of a page, so it gets reset every time the page loads, and doesn’t track across pages.It could be probably be extended to work across multiple pages, say if there was a parent page with child pages loaded in an inline frame. Repeating the actions on the child pages would be a trick, though…

At any rate, in this example, every time a button gets pressed, it records itself by adding a row to a hidden repeater. You can replay the session in any order by pressing the button’s name in the repeater. If you wanted, you could set up a delay function and chain the repeater’s btnName OnClick row by row to replay the whole session with roughly the same timing as the original. Similarly, you could count the number of times each button pressed, etc.

If you wanted a true Undo function, you could assign an “opposite action” for each button to undo what it has done, and set that to an OnMove or OnRotate event for the button (some event not otherwise used) and when the btnName is clicked in the repeater table, fire the appropriate button’s OnMove event to trigger it’s “undo function” --make sense?

Button Recorder.rp (73.8 KB)

What I want is a single ‘Undo’ widget that can be pressed many times.
Each time I press ‘Undo’ … it finds the last named Widget (bottom of list) and calls Hide on it and removes it from the list. So next time ‘undo’ is pressed I call the next widget up the list.

So Undo will have to call the widget named in the list …


Yes, an Undo functionality can be added to this approach, and yes, clicking the Undo button should call the last row in the repeater list and then remove that row, making it a “Last In, First Out” list. This can be done in several ways, and I’ll demonstrate a simple way to update the last row in a repeater. First, we’ll need an Undo button :wink: and the repeater will need to know what to do for that “undo call”.

In this updated version, each action button can perform the opposite action (thus undoing it’s main action) whenever it is moved. Moving a button by (0, 0) will call the OnMove event but won’t actually move it anywhere–this is a common way to trigger an alternative action for a widget in Axure. So, clicking on “Grow” will increase the size of “my thing” to 110% and moving “GROW” will decrease the size to 90% (so mathematically not an exact opposite, but close enough for this demonstration.)

I added a column to the “Button Recorder” repeater named, “Undo” and a Case for OnItemLoad so that when the Undo column contains the string, “yes” the Undo function will be triggered. This is the same as clicking on the btnName widget in the repeater, so the action is just “Fire OnClick on btnName”. So, to call the undo function from outside the repeater, just update the row, setting the “Undo” column to “yes”. To do this for only the last row in the repeater, we need a rule that says “if this is the last row, set Undo to “yes” and trigger the undo function.” Fortunately, Axure provides repeaters with an “isLast” property. Here is what that code looks like in Axure (assigned to the UNDO button’s OnClick event) :

So, as soon as the last row in the repeater is updated so the “Undo” column contains “yes” the repeater’s btnName widget (in that last row only) is virtually clicked. That causes it to move the appropriate user button (e.g., “GROW”) thus “undoing itself” --and then it deletes its own row, in a kind of hari kari way, if you will.

Take a look at the code in this file for more details.

Button Recorder with Undo.rp (79.2 KB)

1 Like