Dynamic Panels

The Dynamic panel is a container widget. In a prototype’s screen it holds other UI elements.

The Dynamic Panel is used to display different content elements within the same region of a screen (e.g. navigation tabs, pop ups etc.).

Dynamic Panel widgets consist of a panel (container) or set of panels. Each Dynamic Panel has a single panel by default, but more can be added once the Dynamic Panel is dragged to the Canvas.

Only one panel can be displayed at a time, and any additional panels are hidden until selected by the user.

dynamic panels

Adding a new panel to a Dynamic Panel

To add a new panel to a Dynamic Panel:

add new panels

  1. In the Canvas, select your Dynamic Panel. A floating toolbar will appear at the top of the Dynamic Panel
    • Note: the toolbar may appear at the bottom of the Dynamic Panel if there is no space to display it at the top
  2. Click on the ‘+’ icon in the toolbar to add another panel

Selecting a panel

You can only view and work on one panel at a time. If your Dynamic Panel has multiple panels, you will need to select the one you wish to view and work on from a drop-down list.

To select a panel:

selecting panel

  1. In the Canvas, select your Dynamic Panel
  2. A floating toolbar with a drop-down will appear on the left of the ‘+’ icon. The drop-down lists all of your Dynamic Panel’s panels
  3. Click on the drop-down to view its contents
  4. Select the panel you wish to view. This panel will be displayed

Removing a panel

To remove a panel:
remove panel

  1. Make sure you’re in the panel you want to remove
  2. Right-click on the Dynamic Panel in the Canvas and click “Remove panel”
    • Note that if you remove a panel from a Dynamic Panel, any UI elements that it contains will permanently deleted.

If you click “Delete”, you will delete the entire Dynamic Panel and any UI elements that it contains.

Editing a panel’s name

Panels are labelled numerically when created (i.e. Panel 1, Panel 2 and so on), but their names can be changed manually.

To edit a panel’s name:

editing panel name

  1. In the Canvas, select the panel you wish to edit from within your Dynamic Panel
  2. Go to the Properties palette
  3. Change the panel’s “ID Layer”
    • Note that if you change the “ID” you are changing the name of your Dynamic Panel, not the currently selected panel.

The default panel

As mentioned above, every Dynamic Panel has a default panel, which will be displayed first upon simulating the prototype. When a Dynamic Panel is added to the Canvas, the default panel is Panel 1, but this can be changed manually.

To change the default panel:

default panel

  1. Select your Dynamic Panel (the selected panel is not important)
  2. From the Properties palette change the “Default Layer” to the panel you wish to display first upon simulation

Adding UI elements to a Dynamic Panel

You can add as many UI elements as you like to a Dynamic Panel.

There are three ways to add a UI element to a Dynamic Panel:

  • With drag and drop from a Widget Library or the Canvas
  • Dragging a UI element into the panel from within the Outline palette
  • By creating a Dynamic Panel group of UI elements

To add UI elements to a dynamic panel with drag and drop:
add ui elements

  1. Select the panel that you want to add elements to from the drop-down
  2. Right click on the Dynamic Panel and select the option “Edit Content”. You can also double click on the Dynamic Panel
  3. Drag and drop widgets from the Widget Libraries, or UI elements from the Canvas, into the panel

To add UI elements to a dynamic panel from the Outline palette:
dynamic panel outline

  1. Go to the Outline palette
  2. Find the panel you want to add UI elements to from within the Dynamic Panel
  3. Drag and drop the UI element into the selected panel

To create a a Dynamic Panel of UI elements:
ui elements group

  1. Select all the UI elements you want to group together from the Canvas (either with the mouse or by entering “Control” + “A” with your keyboard if you want to select all UI elements in the Canvas)
  2. Right click within your selection and select the option “Group in Dynamic Panel”
    • Note that you can also select the UI elements from within the Outline palette and create a group (Right click, “Group in Dynamic Panel”).

Removing an item from a Dynamic Panel

To remove an item from a Dynamic Panel:

Make sure the panel containing the UI element is active and drag the item out of the Dynamic Panel.

removing dynamic panel

Or, go to the Outline palette, select the object and drag it out of the Dynamic Panel.
outline palette remove