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.
To add a new panel to a Dynamic Panel:
- 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
- Click on the ‘+’ icon in the toolbar to add another 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:
- In the Canvas, select your Dynamic Panel
- 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
- Click on the drop-down to view its contents
- Select the panel you wish to view. This panel will be displayed
To remove a panel:
- Make sure you’re in the panel you want to remove
- Right-click on the Dynamic Panel in the Canvas and click “Remove panel”
Note: 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.
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:
- In the Canvas, select the panel you wish to edit from within your Dynamic Panel
- Go to the Properties palette
- Change the panel’s “ID Layer”
Note: if you change the “ID” you are changing the name of your Dynamic Panel, not the currently selected 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:
- Select your Dynamic Panel (the selected panel is not important)
- From the Properties palette change the “Default Layer” to the panel you wish to display first upon simulation
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:
- Select the panel that you want to add elements to from the drop-down
- Right click on the Dynamic Panel and select the option “Edit Content”. You can also double click on the Dynamic Panel
- 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:
- Go to the Outline palette
- Find the panel you want to add UI elements to from within the Dynamic Panel
- Drag and drop the UI element into the selected panel
To create a a Dynamic Panel of UI elements:
- 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)
- Right click within your selection and select the option “Group in Dynamic Panel”
Note: you can also select the UI elements from within the Outline palette and create a group (Right click, “Group in 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.
Or, go to the Outline palette, select the object and drag it out of the Dynamic Panel.