Totalwireframe is now free for everyone.

Oh! You are the type of people who browses the web on your mobile. Good, good. Everything works on mobile, including the purchase process.

Taming the dynamic panel

  • Duration: 04:11
  • Level: intermediate
  • Axure Version: 7.0+
  • Date: Jun 26, 2015

Transcript

One of the most complicated widget to understand with Axure is the dynamic panel. It can be used to do so many things, it's almost terrifying.

So instead of scaring you, why wouldn't we start with a basic example?

Let's first add a rectangle on the canvas. Then add some text. Place a button too. Now, right click on the rectangle and select the option Convert To Dynamic Panel. See how the form becomes blue-ish.

Now let me tell you what a dynamic panel is. A dynamic panel is a widget that can have one or more states. In our example, we need several states: one when the text is normal. Another one when the box is blue. And a final one when it's hidden. Now double click on the dynamic panel we've just created. A new page appears and it contains the rectangle we've just created. This page will be the first state we need. We'll now create a second state. To do that, we can either create a blank new state or duplicate the current state. I find it more convenient to always duplicate the states. Right click on the state to duplicate it and double click on the new state. Change the color of the rectangle to blue. Here we go, we created the second state. Just to make things clearer, we will rename the states. It will be just easier to reference them later on.

Renaming a state is not an easy task in Axure. You have to double click on your dynamic panel (not inside a state). A popup will appear. Then, don't double click on a state, but rather do a single click on it. Like, a gentle, nice, single click. Here we go - you can now rename the state.

Ok. So now let's manage the third state we need. Remember, the final state was the hidden state. Something blank. You have two choices there: you can either create a new state that will be basically empty. Or you could also simply consider that the third state can be the dynamic panel itself…. hidden.

So ok. We now have three states. What did we say again? When we click on this button, the box should turn blue. This type of behaviour is called an interaction and there is panel for that.

It's located over there. To understand what we are trying to do, the best is to say it in plain english: when we CLICK on the button, we want to display the state called Blue state on the dynamic panel.

Ok, let's start. Select the button you want to add an action with and double click on the OnClick event.

This panel appears. Choose the Set Panel State option. And select the state oooovvver there. To sum up: When we CLICK on the button, please change the state of the dynamic panel to this state. Simple, isn't it? Then you can press Enter.

Now, let's generate the wireframe to see if something happens in the browser. I can click the button and here we go, the text turns blue. Ok, the next step now is to hide the dynamic panel when the other button is pressed. Again, select the button, choose the onClick event but this time, select Show/Hide and choose your dynamic panel, then change the Visibility.

Generate the wireframe again, and play with it in the browser.

We now have a fully functional mechanism to display or hide elements upon the click of a button.

This was just the tip of the iceberg with the dynamic panel. Stay tuned for more lessons in the future.

Continue your learning