Download MP4

The dynamic panel is now your friend. We hope you're ready to enjoy the rest of your rich, interactive life together.

This tutorial shows how to use the Dynamic Panel to show and hide a custom tooltip when moving the cursor over and out of a widget.

Go to Custom Tooltip Tutorial

This tutorial uses the Dynamic Panel and the "Show Panel(s)" action to dynamically show a hidden error message.

Go to Show Hidden Panel Tutorial

This tutorial uses a Dynamic Panel with multiple states and the "Set

Panel State(s) to State(s)" action to set the content displayed in a tab control.

Go to Tab Control Tutorial

The “Move Panel(s)” action allows you to dynamically move content by a specified number of pixels or to a specific location on the page. Place the content you want to move into a dynamic panel, and add an interaction case to the event that will trigger moving the panel (i.e., add a case to the OnClick of a button that will move a panel).

In the Case Editor, choose the “Move Panel(s)” action and choose the panel you want to move. Toward the bottom of Step 4 in the Case Editor, you can set the panel to move “by” a number of pixels in the x and/or y direction, or you can set the panel to move “to” a specific (x,y) location.

This action is can be used to prototype and an expanding of collapsing region to move content that is below the content that is shown or hidden. (See examples below).

If your dynamic panel ends up behind other widgets in your design but needs to be on top when shown in the prototype, you can use the “Bring Panel(s) to Front” action. This brings the panel to the top layer of the page above the other widgets in the wireframe. In the Case Editor dialog, select the action and choose from the list of panels on the page. You can select multiple panels to bring to the front of the page in one case. "Send Panel(s) to Back" does the opposite.

This action might be used when creating light boxes, custom flyout menus, and custom tooltips, and especially if the panels are within masters placed in the background of the pages. (See examples below)

Create a dynamic panel with multiple states and use the “Set Panel state(s) to State(s)” action to set the panel to a specific state. In the Case Editor dialog, select the action and choose from the list of panels on the page. Once you choose a panel, you can select the state you want to set it to. You can set the states of multiple dynamic panels in the same action.

This action is used for patterns like tab controls or changing content in an area based on a button or droplist selection. (See examples below)

Use the “Show Panel(s)” and “Hide Panel(s)” actions to show or hide the contents of the current state of a dynamic panel. In the Case Editor dialog, select the action and choose from the list of panels on the page. It's a good idea to label dynamic panels to make them easier to find here. You can select multiple panels to show/hide in the same action.

Use the “Toggle Visibility for Panel(s)” action to toggle between showing and hiding a panel.

This action can be used for things like error messages that show/hide dynamically. (See examples below)

Once you have a dynamic panel on your wireframe, you can add interactions as you normally would by adding a case to an event and choosing from the list of actions. The actions available for interacting with dynamic panels include: Set Panel state(s) to State(s), Toggle Visibility for Panel(s), Show Panel(s), Move Panel(s), Hide Panel(s), Bring Panel(s) to Front, Send Panel(s) to Back.

We’ll go over a few of the basic interactions including showing/hiding dynamic panels, setting dynamic panel states, and bringing panels to the front. Move

Panels along with the dynamic panel events are discussed in Advanced Dynamic Panels.

To add or remove states, select a dynamic panel name or a state and click the Add State button in the Dynamic Panel Manager Pane toolbar. You can also right-click on a panel name or a state and use the options in the context menu.

To open a state for editing, double-click the state. You can also select a panel name or state and click the Edit All States button to open all the states in a dynamic panel. That option is also available when you right-click on the panel name.

The Dynamic Panel Manager pane provides an overview of all the dynamic panels added to a wireframe and is another way to manage them. It's particularly helpful when you're using many dynamic panels on a page and want to navigate them quickly.

It also provides the ability to hide dynamic panels from view in the wireframe editor making it easier to select widgets that may be under them.

There is also an option to list masters on the page.

If it isn’t already in view, go to View -> Dynamic Panel Manager in the main menu to display the pane.

To hide a dynamic panel from view in the wireframe pane, click on the blue square to the right of the dynamic panel name. To hide all the panels on a page, right-click on the page name and select Hide All. This is useful when dynamic panels are on top of or overlap other widgets.

Note that this is different from hiding the contents of the dynamic panel by default.

Dynamic panels can be set to hidden by default. To do this, right-click on the panel in the wireframe and choose Edit Dynamic Panel -> Set Hidden from the context menu.

This hides the panel contents and changes the mask of the widget from blue to yellow.

By default, the dynamic panel is empty, so you will need to place the content (widgets) into the dynamic panel state(s). To do this, double-click the panel and the Dynamic Panel State Manager dialog will open.

In this dialog, you can add, remove, rename, reorder and open states to edit. The first state in the panel is the default state of the panel.

Select a state from the list of states and click “Edit State” to open the state for editing.

You’ll notice a blue dashed outline in the state you are editing. This shows the size of the dynamic panel and is the boundary for what you can see in the state. Design panel states by dragging and dropping widgets like you would for any wireframe.

Scrollable Area: To add scrollbars to a dynamic panel, right-click on the panel and choose Edit Dynamic Panel -> Show Scrollbars as Needed. If you add widgets outside of the dashed boundary of a state, scrollbars will appear on the dynamic panel in the prototype.

Dynamic Panels allow you to hide, show, swap, and move content in your wireframes. This article covers the basics of using dynamic panels to show and hide content.

A dynamic panel can contain one or more states and each state is a diagram that can contain other widgets. One state of a dynamic panel can be visible at a time. Using interactions, you can make the panel visible or hidden as well as set the current visible state.

To add and size a dynamic panel, drag and drop the dynamic panel widget on to the wireframe pane and use the handles to resize it. The size of the dynamic panel widget determines the boundaries of what you see from the contained states on the wireframe page.

Tip: If you already have widgets on your wireframe that you'd like to make dynamic, this is a great chance to use the “Convert to Dynamic Panel” feature. Select the widgets you want to place into the dynamic panel, right-click, and choose Convert -> Convert to Dynamic Panel. This automatically creates a new dynamic panel and places the widgets into the first state.

The dynamic panel widget is a stack of states or diagrams that contain other widgets. The panel can be hidden, shown and moved. And the currently visible diagram can be set dynamically. This allows you to demonstrate functionality in your prototype like custom tooltips, lightboxes, tab controls, and drag and drop. As a general rule for Axure RP, whenever you want to show, hide, change, or move objects in your prototype; use a dynamic panel. You may find that it becomes one of most used tools in your prototyping toolbox.

You can move dynamic panels (and their contents) with an animation effect as well as show and hide them with a fade effect. Warning: these animations may be easy and fun for you to prototype but difficult for the developers to build :)

When defining the Move Panel action, you can choose a transition like swing or bounce and specify the duration of the animation.

And when defining Show Panel, Hide Panel, or Toggle Panel Visibility, you can choose a fade animation.

When setting a panel state with Set Panel State, you can fade or slide the states in and out.