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.
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.
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!