Show/Hide Content Using Dynamic Panels
Dynamic Panel Widget Overview
The dynamic panel widget allows you to demonstrate functionality in your prototype like custom tooltips, lightboxes, and custom tab controls. See Axure Design Patterns for examples. A dynamic panel can contain one or more states (like layers). Using interactions, you can make the panel visible or hidden as well as set the current visible state.
Add and Edit Dynamic Panel States
To add and size a dynamic panel, drag and drop the dynamic panel widget on to the wireframe pane and use the green handles to resize it. The size of the dynamic panel widget determines the boundaries of the contained states.
To edit the dynamic panel, double-click the panel to open the Dynamic Panel State Manager dialog.
In this dialog, you can add, remove, rename, reorder and edit states. 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 it for editing.
Once open, you design panel states like any other wireframe by dragging and dropping widgets. The blue dashed outline in the state show the boundaries of the dynamic panel.
Tip: It's a good idea to label your panels. This becomes very useful when you add interactions that affect them.
Using the Dynamic Panel Manager (Available in Version 5.5+)
Select View->Dynamic Panel Manager in the main menu to display the Dynamic Panel Manager pane. The Dynamic Panel Manager provides another way to manage the dynamic panels on a page.
To add or remove states, right-click on the dynamic panel name or a state and use the options in the context menu.
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 overlap other widgets.
To open a state for editing, double-click the state. To open all the states of a dynamic panel, right click on the Dynamic Panel name and select "Edit All States".
Show and Hide Dynamic Panels
Once you have a dynamic panel in your wireframe, you can use interactions to dynamically show and hide the panel in the prototype.
Add a case to an event and open the Interaction Case Properties dialog (like the OnClick of a button). Select the Show Panel or Hide Panel actions and click on the panel link below to choose the panel(s) to show or hide.
Dynamic panels can also be set to be hidden by default. To do this, right click on the dynamic panel in the wireframe and select Edit Dynamic Panel->Set Hidden. This hides the panel contents and changes the mask for dynamic panels from blue to yellow. This is different than hiding the dynamic panel from view in the editor using the Dynamic Panel Manager.
Example - Error Message (
RP File |
Prototype )
See an example of a login button where an unsuccessful login dynamically shows an error message in a dynamic panel. Try it for yourself by following the instructions in the file.
This is just a sample of what you can do with dynamic panels. To learn more, visit Use Dynamic Panels.
Summary
You're now familiar with one of the most powerful widgets in your Axure tool box and can start showing richer interactions in your prototypes. Have questions? Email us at support@axure.com and we can help.
