Exercises: Dynamic Panels

Dynamic Panels make it easy to access different content within the same area of a screen. You can use them to create unique and dynamic UI/UX prototypes. Check out these exercises for examples of how to use them in Justinmind.

Mask images

You can use dynamic panels to mask images in your prototypes. Here’s how:

  1. Select an image on the Canvas.
  2. Right-click on it, go to Group, and then select ‘Group in Dynamic Panel’.Right click on an image and group it in a dynamic panel to mask it
  3. You’ll see that the image is now within a dynamic panel, and you can use the indicators to resize the panel around the image. You can also move the image around inside the panel.Group the image a dynamic panel and use the indicators on each side to resize the panel around the image

Confirmation dialog

You can use dynamic panels to create warning messages and modal windows. In this example, you’ll learn how to create a confirmation dialog using a dynamic panel and Set Active Panel actions.

Design the example

  1. Design a web or mobile prototype. To match the example, create an Android prototype and place some Rectangle, Text, and Image elements on the screen.Add text, rectangles, and images to the canvas
  2. Place a dynamic panel on the Canvas, covering the entire screen. You can find it in the Dynamic Content section of the Toolbar or by hitting the D key.
  3. Mark the dynamic panel as hidden during simulation by tapping the ‘eye’ button in the Properties palette.Click the eye button in the properties palette to hide the panel
  4. Give the dynamic panel a black background with 40% opacity. This will be the modal window background.Change the dynamic panel to a dark background with 40 percent opacity
  5. Place Rectangle and Text elements inside the dynamic panel to create the dialog. You can place them in the panel by holding Command (Mac) or Control (Windows) and dragging the elements inside. To match the example, create “No” and “Yes” texts.Drag rectangle and text elements into the panel to create the dialog
  6. Right-click on the dynamic panel and select ‘Duplicate Panel’. You should now have one dynamic panel with two sub-panels – Panel 1 and Panel 2.
  7. Customize the confirmation dialog in Panel 2. To match the example, only include one text element – “OK”Style the second panel dialog.

Create the events

  1. Select an element that you’d like to show the confirmation dialog. To match the example, select an ‘X’ icon.Go to the Events palette and click ‘Add event’. Create an On Tap + Show Hidden Element event, selecting the dynamic panel in the Canvas preview to show. Add a fade effect and click ‘OK’ to finish building the event.Choose the show hidden element and pick the dynamic panel to be shown
  2. Note: in Web prototypes, On Tap will be On Click.
  3. Now you’ll need an event to switch between the two panels in the confirmation dialog. Select the “Yes” text in the dialog, create an On Tap + Set Active Panel event, and select Panel 2 to be set as active.Set panel 2 as active
  4. Since you can also select “No” in the confirmation dialog, you need to create an event to hide the dynamic panel. Select the “No” text and create an On Tap + Hide event, selecting the dynamic panel to be hidden with a fade effect.
  5. Switch over to Panel 2. Select the “OK” text and create an On Tap + Hide event, selecting the dynamic panel to be hidden with a fade effect.

Click the ‘Play’ button to simulate your prototype. Click on the ‘X’ icon and you’ll see the confirmation dialog appear. Click the “No” text to hide the dialog, or the “Yes” text to switch to the next panel. Then, click the “OK” text to hide the dialog.

Navigation tab menus

In this example, you’ll learn how to create navigation and menu tabs with dynamic panels. You’ll use each tab to switch to different dynamic panels that hold different information.

Design the example

  1. Drag four Rectangle elements to the Canvas, positioning them horizontally on the Canvas to match the example. These will be the navigation tabs you’ll switch between. Style them as preferred and name them “Tab One”, “Tab Two”, “Tab Three” and “Tab Four”.The rectangle on the left (“Tab One”) will be the default selected tab. Change its background and font color so that it looks selected.
  2. Drag another rectangle below the tabs and resize it to be larger. This Rectangle will act as the background layer for the window that each tab displays.
  3. Place elements on top of the rectangle to create the content of your first tab window.Design the content of the tab window
  4. Select the rectangle and the elements inside the tab window, right-click, go to group, and select ‘Group in Dynamic Panel’. All of the elements except the tabs on the Canvas should now be within a dynamic panel.
  5. Right-click on the panel and select ‘Duplicate panel’. Duplicate this panel two more times until there are four panels in total.
  6. Change the window content in each panel as preferred.Duplicate the panel three times and customize the content inside

Create the events

You’ll need to build some events so you can switch between the tab windows during simulation.

  1. Select the “Tab One” rectangle, look to the Events palette and click ‘Add event’.
  2. Create an On Click + Set Active Panel event, selecting Panel 1 to set as active. Now, whenever you click on “Tab One”, you’ll switch to Panel 1.Create an on click and set active panel event, setting panel 1 as active
  3. Look back to the events palette and click the ‘+’ button next to the action you just created. Create an On Click + Change Style event, selecting “Tab One” as the target of the action. For the styles to change, add the background and font colors. Leave the colors as the default.

    This action changes “Tab one” to look selected when you click on it.

  4. Next, you need to create an event to change the style of the other tabs to look unselected when you click on “Tab One”.Click the ‘+’ button next to the action you just created and create another On Click + Change Style event. Select the three other tabs as the targets of the action – you can use Shift to multi-select. Add the background and font colors to change, leaving their coloring as the default.Select tabs two, three, and four to change style to look unselected
  5. Click on the ‘copy’ button at the top of the Events palette to copy all of the actions you’ve created on “Tab One”. Go to “Tab Two” and click the ‘paste’ button to paste them on “Tab Two”.
  6. Double click on the Set Active Panel action and change the panel that’s set as active from Panel 1 to Panel 2.
  7. Double click on the Change Style action that changes the style of Tabs two, three, and four. Deselect “Tab two” and select “Tab One” to be included in the action. You should now have Tabs one, three, and four selected to change style.Select panels one, three, and four to change style. Deselect tab two.
  8. Repeat steps 5 through 8 until each of the tabs have the correct actions – i.e. clicking on “Tab Three” sets Panel 3 as active, changes “Tab three” to look selected and Tabs one, two, and four to look unselected.

Click the ‘Play’ button to simulate your prototype. Click on one of the tabs to switch panels and see how that tab changes style to look selected.

Drag and drop items

In addition to working as mini-Canvases, dynamic panels also have special properties as a container. This means you can insert elements into them while simulating. You can use this functionality to drag and drop elements between two dynamic panels.

Design the example

  1. Add two Rectangles to the Canvas and resize them until they’re both the height of the Canvas and about half of its width. These rectangles will serve as the background.Place two rectangles on the canvas to be the background
  2. Place a Dynamic Panel on the Canvas. Look to the Properties palette and select ‘Vertical’ from the ‘Layout’ dropdown. This will give the panel a vertical layout, which means that the elements you place into it will stack above and below each other.Change the panel to a vertical layout in the properties palette
  3. Still in the Properties palette, change the dynamic panel’s alignment to centered and add some vertical spacing.
  4. Duplicate the dynamic panel so you have two different dynamic panels on the Canvas. Place one panel on the left of the screen and one on the right. Resize each of them until they both take up the entire height of the Canvas and half of its width.
  5. Drag a few images or icons into the dynamic panel on the left. You’ll notice them fall into place stacked above and below each other.

Create the events

  1. Active the direct selection tool A to select one of the images in the dynamic panel on the left. Create an On Drag + Move event, selecting that image as the target to move.For the movement, select ‘With cursor’ for both the X (horizontal) and Y (vertical) positions. Now, this image will move with your mouse when you drag it during simulation.
    Create an on drag + move event and move the image with the cursor
    Click ‘OK’ to finish building this event.
  2. Click the ‘+’ button at the top of the Events dialog to create another interaction for the image. Follow these steps to build the interaction:
    • a. Choose an On Drag Stop trigger.
    • b. You’ll see a new field appear where you can choose the drop target. This works as a mini-condition that will trigger the resulting action when you stop dragging over this target.Click the ‘gear’ button to open a Canvas preview where you can select the drop target. Select the dynamic panel on the right.
    • c. You can now select an Insert element into container action. You’ll see two Canvas previews appear. In the top preview, select the image.In the bottom preview, select Panel 1 from the dynamic panel on the right. Click ‘OK’ to finish building the event.
  3. Click the ‘+’ button again to create another interaction. Create another On Drag Stop + Insert element into container event. This time, select the dynamic panel on the left as the drag stop target as well as the container to insert the image into.
    Create another on drag stop event, inserting the image into the panel on the left
    You should now have three different interactions in your events palette.
  4. Now, you can copy those events over to the other images in the dynamic panel. Click on the ‘copy’ button in the Events palette. Select another image in the dynamic panel and click the ‘paste’ button in the Events palette. Repeat this until you’ve pasted the events on all of the images.There should be three events in the events palette for each image

Click the ‘Play’ button to simulate your prototype. Drag images between the panels and you’ll see them placed into the panel while the remaining images in each panel will automatically move to be centered.