Previous State Behavior

Hi, I’m new to Axure. I’m trying to create a back button that would take the page back to the “previous” state. Let me explain.

For example I have 4 states.

  1. Tap on “state 1” links to “State 4”
  2. Tap on “State 2” links to “State 4”
  3. Tap on “State 3” links to “State 4”

Now there’s a “Back” button and I want it to return to “previous” state loaded. Like example “Back” button will take me back to “State 1” if that was the last state I was on. Or takes me back to “State 2” if it was the last state.

The current “previous” state always takes me back to “State 3” because it’s the last state on the list.

I hope I explained this clear enough. Any help would be much appreciated.

Thank you

2 Likes

@bjiang908, Welcome to Axure and welcome to this forum.

Dynamic panels were made for just this sort of thing. They can help create, track and jump to different page states, whether it is one, several or many dynamic panels on a page. In fact, dynamic panels are really just stacks of states, by default named, “State1”, “State2”, “State3”, etc. For example, you could select all the widgets on your page, convert them to a dynamic panel (right click that selection and choose “Convert to Dynamic Panel”), and that would be State1. Duplicate that state, change whatever you need, and that would be State2. Then you can use the “Change State” action for that dynamic panel to move between states 1 and 2. You can change the dynamic panel to a specific state name, like “State2” or a more generic “Next state” and “Previous state”.

Now, in practice it’s not that common to have every widget on a page duplicated in multiple states of one dynamic panel, but hopefully it helps explain the concept for you. You can learn more about dynamic panels in the Axure Tutorials, like this one:
https://docs.axure.com/tutorials/basics/rotating-carousel-slideshow/

… and in the Axure Documentation:
https://docs.axure.com/axure-rp/widgets/dynamic-panels/

In the Axure forum here when you are trying to describe your particular prototype and needs, you’ll find that a picture is worth 1,000 words, and an .rp file is worth 1,000,000 words. If you can post your source .rp file then other forum users can easily and quickly see exactly what you’ve done and reply with potential solutions, usually with an updated .rp file which you can then inspect and learn from. Cheers!

1 Like

You might also find this example file and discussion from last week useful, it covers similar ground.

Dynamic Panels are used for things like this

Watch some of these videos to see how Dynamic Panels works

https://www.youtube.com/uxshape

The way I read it, the OP is already using a Dynamic Panel.

In order to get a ‘back’ button to work, I think you would need to store the previous state in a variable.
SO:

  • Tap on “state 1” links to “state 4” and stores the text “state 1” in a variable.

    Tapping the back button then uses an if/then/else statement to select the correct dynamic panel state, based on the value of the Variable.

A bit clunky, but if that’s what you’re trying to do (remember the last state of a Dynamic Panel and return to it), that’s the best solution I can think of.

Cheers

Dynamic panels include an option (when state is changed) to revert to the previous state. It’s in the ‘Set Dynamic Panel’ interaction.

Thank you for all your replies!

@shanemo I tried looking into the variable. I can’t understand what that entails yet. How should I set these variables to reflect what I’m trying to do?

@davegoodman Yes I did that. However in my example above, Problem I had with “Previous” state is that it always goes from state 4 to state 3. But the user’s behavior was tapping state 2 to state 4. I need the back button to return from state 4 to state 2 and so on and so forth.

Ah, apologies.

Re @shanemo 's suggestion above, if you set a global variable every time the dynamic panel changes, you can then call that variable the next time you use the Set Panel State interaction, using the ‘Value’ option at the bottom of the list. So, if you left State 2, you could set a global variable called ‘LastState’ to ‘State 2’. Then, when your user clicks the ‘Back’ button, you could set panel state to whatever ‘LastState’ is, which in this case would be State 2.

1 Like

Yes of course. Use a value. D’oh.

Here’s a simple example.
When the dynamic panel’s state is changed, it stores it’s previous state into a variable called ‘PreviousState’ and saves it’s new state in a variable called ‘CurrentState’.
When the BACK button is pressed, it sets the panel state back to the value stored in PreviousState.

Back to previous state.rp (59.4 KB)

Note that this only provides one level of ‘back’

2 Likes

OMG. @shanemo you just saved me! I’ve been scouring the interwebs for a solution to this for HOURS and finally found your post! I just applied it to a sm-med sized prototype and it worked like a charm. Just wanted to say Thank You!

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.