Dynamic Panels
Dynamic Panels are widgets that were designed to enable dynamic functionality in the prototypes. For example, drop down menus and tab controls can be created using dynamic panels. Interactions can be created to show and hide these panels as well as change their state, meaning show a different wireframe in the panel.
Dynamic panels can contain one or more states. Double-clicking a dynamic panel in a wireframe will open the Dynamic Panel State Manager dialog. In this dialog, new states can be created, renamed, reordered, removed, and edited. The first state in the panel is the default state of the panel.
Selecting a panel state in the Dynamic Panel State Manager and clicking Edit State, opens a new wireframe for editing the panel state.
Dynamic panels can also be edited and managed in the Dynamic Panel Manager pane.
Dynamic Panel Manager
The Dynamic Panel Manager can be shown using View->Dynamic Panel Manager. It will be added to the bottom of the right-hand side. Dynamic panels can contain one or more states. States can be added, removed, and opened for editing in the manager. To add or remove states, right-click on the dynamic panel name or a dynamic panel state and use the context menu. The first state in the panel is the default state of the panel.
Double-clicking a state in the Dynamic Panel Manager opens a new wireframe for editing the panel state. To open all the states of a dynamic panel, right-click on the dynamic panel name and select Edit All States.
Dynamic panels on the page can be hidden from view in the wireframe editor for easier access to widgets beneath them. To hide a dynamic panel, click on the blue square to the right of the dynamic panel name, or to hide all the panels on a page, right-click on the page name and select Hide All.
Hiding Dynamic Panels
Dynamic panels can also be set to be hidden. This is different than hiding the dynamic panel from view in the editor using the dynamic panel manager. Right-clicking and selecting Edit Dynamic Panel->Set Hidden will set the dynamic panel to be hidden by default. This will hide the panel contents and change the mask for dynamic panels from blue to yellow. The dynamic panels can be dynamically shown in the prototype using interactions as described below.
Interactions and Dynamic Panels
After designing one or more panel states, Interactions can be created to interact with the panel and its states. The Interaction Case Properties dialog contains the following set of actions that work with panels:
-
Set Panel state(s) to State(s)
-
Show Panel(s)
-
Hide Panel(s)
-
Toggle Visibility for Panel(s)
-
Move Panel(s)
-
Bring Panel(s) to Front
After selecting one of these actions, the panel to interact with and the state to set the panel to (if needed) can be specified by using the hyperlinks in the Actions descriptions and the dialogs that follow. In these dialogs, the dynamic panels are identified by the Label of the panel. If no Label has been entered, the panel will be ‘Unlabeled”.
An example of how a dynamic panel could be used is to create a tab control. Consider a tab control with 3 tabs. A dynamic panel could be created with 3 states, each representing the contents of one of the tabs. Then, 3 buttons could be placed around the dynamic panel, each having an interaction that would set the state of the panel to the appropriate state when clicked.