Use Dynamic Panels
Learn to build multi-state dynamic panels to add dynamic functionality to your prototypes such as tab controls and expanding and collapsing regions.
Contents
Interactions and Dynamic Panels
Set Dynamic Panel States
Move Panels
Bring Panels to Front
Interactions and Dynamic Panels
In Show/hide content using dynamic panels you learned the basics of the dynamic panel widget and how to use the Show Panel and Hide Panel actions.
Below is a list of all of the actions that affect dynamic panels.
Set Panel state(s) to State(s): Set the current state of dynamic panels.
Show Panel(s): Shows (makes visible) one or more dynamic panels.
Hide Panel(s): Hide one or more dynamic panels.
Toggle Visibility for Panel(s): Show or hide dynamic panels based on their current visibility.
Move Panel(s): Move a dynamic panel to a specific location or by a specified distance.
Bring Panel(s) to Front: Bring a dynamic panel to the top layer of the page.
For each action, you can specify the dynamic panels to affect, and if necessary, the panel states. When defining the actions, dynamic panels are identified by their Label. If the dynamic panel does not have a label, it will be called “Unlabeled”. It’s very useful to label widgets (not just dynamic panels) when you define interactions that affect them.
Tip: You can also build conditions based on which state is currently visible in the dynamic panel (available for Version 5.5+). To learn more about conditions, visit Using conditional logic.
Set Dynamic Panel States
Create a dynamic panel with multiple states, each state representing a different view of an element or different layer. Then, use the “Set Panel state(s) to State(s)” action to dynamically set the visible state from an interaction. This is useful for designing components like tab controls and accordions.
Example - Tab Control (
RP File |
Prototype )
See an example of a tab control created using a dynamic panel and the Set Panel States action. Follow the instructions in the file to build one yourself.
Tip: To create a tab shaped button, drag a Button Shape widget, right-click on the widget and select Edit Button Shape->Tab.
Move Panels
Create a dynamic panel with one or more states containing the content that will be moved. Then, use the “Move Panel(s)” action to dynamically move the panel to a location or by a number of pixels from an interaction. One use of this action is to create expanding and collapsing regions on a form.
Example - Expanding/Collapsing Regions (
RP File |
Prototype )
See an example form with an expanding and collapsing optional question created using dynamic panels and the Move Panel action. Follow the instructions in the file to try it yourself.
Tip: You can use the Location and Size pane or the bar at the bottom of the environment to see the size of the panels.
Bring Panels to Front
Create a dynamic panel and design the states. If the dynamic panel is below other widgets, use the “Bring Panel to Front” action to dynamically bring the dynamic panel above the other widgets on the page. This is useful for prototyping features like lightboxes, flyout menus, and custom tooltips especially if they are designed within masters placed in the background of pages.
Example - Light Box (
RP File |
Prototype )
See an example light box created using a dynamic panel and the Bring Panel to Front action. Follow the instructions in the file to try it yourself.
Summary
You can now create dynamic functionality such as tab controls, accordions, custom tooltips, lightboxes and more with multi-state dynamic panels and interactions. If you need a little extra help email us at support@axure.com.
