FR

Réalités Parallèles

Ergonomie et conception de jeu vidéo

Axure basics - creating within-page interactions with dynamic panels

We have discussed earlier the general layout and logic of axure, how to create browsable storyboards with the tool, and how to implement simple within-page interactions such as anchor links.

In this post, we are going to take a tour one of the most powerful features of Axure : dynamic panels.

In order to create a dynamic panel, the most efficient way is to create a static version of what you want to place inside the panel, then select it. Right-click on it, then chose “convert to dynamic panel”. In our case, we created a poll that we want to make dynamic.

Screenshot of selected content being converted to a dynamic panel through a contextual "right click menu" option.

It is also possible to drag and drop an empty dynamic panel from the widgets list. In both cases, double click on the panel to edit it.

Screenshot of a dynamic panel manager with a single state called "State1" and a mouse clicking on the + button to add a second state.

Each dynamic panel is composed of several states. By default, it has only one. Each state represents one possible display of information within the same area of the screen. To add another state, click on the plus, and name it.

Screenshot of the dynamic panel manager, showing a dynamic panel containing two states: "State 1" and "Results" which was just renamed.

In our example, we are going to add a result view of the poll once the user submits an answer, so we are going to call our state 2 : “Results”.

We will also re-name the first panel to ” Poll”.

Screenshot of the dynamic panel manager, showing a dynamic panel containing two states: "Poll" and "Results".

Slowly click twice on the state to edit its name, or right click and select rename.

In order to edit the content of the panel, double click on the state you want to modify. You can also open all states in separate tabs using the button shown in the screenshot below.

Screenshot of the content of a dynamic panel being edited in Axure.

Each state of a dynamic panel appears as an independent page / tab in the work area. Since we have converted a selection to a dynamic panel, our first state already contains something.

Screenshot of the tab at the top of the Axure work area showing that the content being edited is inside a dynamic panel.

The title of the tabs contain both the dynamic panel name, the state name and the page that contains it.

In order to keep a similar layout, let’s copy paste the content of the first state into the second. Just select all, copy it, open the other tab and paste.

Screenshot of the process of copy-pasting the content for the second panel into the dynamic panel.

Replace the elements that you want inside the panel’s state. In our case, we will replace the bullet points by a bar diagram.

SCreenshot of the results panel content showing results of a poll within the second state of a dynamic panel.

Now we will implement the interactions. We want the user to see the “results” state of the panel when he clicks on the “submit” button of the poll. Select the button. In the interactions, select “onClick”.

Screenshot of adding an interaction on click to a "vote" button.

In the dialog menu, look at the third group of interactions called “Dynamic Panels” and select “set panel state”. In the screenshot below, the other action groups are collapsed to make it easier to view the dynamic panels.

Screenshot of the case editor with set panel state to state selected.

On the right column called “configure actions”, select the panel you want to update. We didn’t give it a name, so it’s called ” (Dynamic Panel) ” . If there are several panels, it’s better to name them to find the right one faster.

Actions panel in the case editor, configued to set dyanmic panel state to "Results".

Select the state of the panel that you want to display (for us, it’s “Results”). You can chose animations too, both for the state that will disappear, and for the state that will appear.

Generate your prototype by pressing F5 to preview your interaction.

Dynamic panels can be used efficiently for a variety of things :

By combining the dynamic panel states and widget visibility, you can also :

Posted by on 2014-08-22. Last updated on 2024-06-08

Articles on similar topics

Axure basics - create a browsable interface

Axure training, Beginner Axure tutorial, Training in wireframing interactive prototypes, Interactive wireframing,

Axure basics - creating within-page interactions with anchors and visiblity

Axure training, Beginner Axure tutorial, Training in wireframing interactive prototypes, Interactive wireframing,

Axure - optimal widget use to iterate painlessly

Axure training, Training in wireframing interactive prototypes, Interactive wireframing,

Axure - Creating menus with dynamic panels

Axure training, Beginner Axure tutorial, Training in wireframing interactive prototypes, Interactive wireframing,

Axure - How to create Masters and use them efficiently in Axure

Axure training, Training in wireframing interactive prototypes, Interactive wireframing,

Advanced Axure - Creating repeaters

Axure training, Training in wireframing interactive prototypes, Interactive wireframing,