Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to display dynamic content in your interactive wireframes

Display dynamic content in your interactive wireframes with Justinmind. In this tutorial, you will learn how to display different content on the same screen with the help of an event, using the dynamic panel widget.

In the following example, an ‘On click’ + “Set active panel” event has been applied to the Help icon that – when clicked – shows the panel with the help instructions in it.

You can download the example below here.

Display dynamic content in your interactive prototypes

To build this interactive wireframe follow the instructions below:

1) Create a new prototype and drag and drop a Check box, Text widget (with the text”I agree with the Terms and Conditions”) and an ‘information’ Icon widget onto the canvas. 

Both the iOS8 and Android Icons have ‘Info’ icons to choose from. 

2) Drag a Dynamic panel widget next to the icon.

3) Add a second panel (select the dynamic panel and click the ‘+’ button once). Double click on the first panel to edit it and drag the Text widget (“Click the icon to see the Terms and Conditions”) into it. In the second panel drag a Text widget (“Close”) and a Paragraph.

4) Select the icon and go to the events tab. Click on ‘Add event’, choose the ‘On Click’ + ‘Set active panel’ and select the panel number 2 (remember you can use the outline tree to do so). Then click OK. 

Display dynamic content in your prototypes: events

5) Select the Text widget in the second panel and do the same as you did for the first Text widget, but this time the first panel is the one that must be activated.

6) Click Simulate to see the content changing on click!

Next tutorial > Design Dialogs and Pop Ups in your interactive wireframes

6 Comments

  1. Sam

    October 11, 2014 at 3:16 am

    Hi there

    I’m testing out Justinmind and considering the switch (I currently use axure and it’s definitely clunkier). So far I really like it but I’m struggling to understand how you guys set up dynamic panels. I see in your example you made the the close button separate from clicking on the question mark again. How would you make it close by clicking on the question mark? Axure does this really nice thing when you tell it to set panel state or hide / show where it offers “Next” or “Previous” and then the option to loop through all options. I was using it A LOT in my designs. Right now, I can’t get my new active panel to show. It performs the actions of the new panel but the first panel stays there visually.

    Is this what the new “On Toggle” is for? Can you point me to some documentation or help explain this?

    • admin

      October 14, 2014 at 10:33 am

      Exactly, that’s what the Toggle is for. Toggle will perform an action with the first click and restore the original state on the second.

  2. Daniël

    June 15, 2015 at 5:49 pm

    Hello JUSTINMIND,

    how can I add a connection from a button to another screen’s panel?

    Kind regards and thanks in advance,
    Daniël de Jong.

  3. Alice

    December 15, 2015 at 8:52 am

    How do you wrap image in a paragraph widget?

    • Sonia Duran

      December 15, 2015 at 11:47 am

      Hi Alice,

      You won’t be able to wrap an image into a paragraph widget, however you can drag an image widget into the canvas in any place you need.

      Best,