How to simulate random content in your wireframes
In this tutorial, you will learn how to create and simulate content randomly in your web and mobile wireframes with the use of the ‘Rand’ function in the Justinmind Expression Builder.
The ‘Rand’ function located in the Expression Builder allows you to perform ‘random’ effects on your wireframes and prototypes. This example uses the ‘Rand’ function to simulate a random ad banner.
You can download the below example here.
Creating a wireframe with random content
1) In a new Android phone wireframe, drag a dynamic panel onto the canvas and add 3 additional panels so that you have 4 panels within the dynamic panel in total. Make sure that the dynamic panel is placed at the bottom of the screen, as per our example.
2) Right click on Panel 1 to edit its content and drag an image widget into the panel, changing the image as you wish. Do the same for the rest of the panels.
3) Now, drag another image widget onto the canvas and place it above the dynamic panel. This image widget will serve as the component that, when clicked, will change the appearance of the rest of the screen. In our example, we have designed it as a ‘Play‘ button.
4) Finally, add a text widget, place it between the image widget and the dynamic panel, and rename it ‘label‘, as in our example.
Adding events to your wireframe to make it interactive
1) First of all, we’re going to create an event to signal which panel we’re going to change the state of upon simulation. Select the image widget from the 3rd step above and go to the Events Dialog. Add an ‘On Tap’ + ‘Set Value’, selecting the ‘label’ text widget. At the bottom of the dialog box, select ‘Calculated’ for the value.
2) Now, we’re going to add an expression so that, upon simulation, our wireframe knows to switch between panels. So, click on the ‘Add Expression’ link on the right. Within the expression builder, drag the ‘Rand’ constant, (switch to the Constants tab on the right), followed by the ‘Multiply’ function, (switch back to the Functions tab), into the Expression Builder at the top of the dialog box. Finally, double click on the text box that follows and type in ’20’. Click OK twice.
3) Next, we’re going to add a second event that will prompt the screen to swipe left upon clicking the play button, showing the image in Panel 2. First of all, on the right of the event you have just created, select the option ‘Add Event’ and add an ‘On Tap’ + ‘Set Active Panel’ event, selecting Panel 1. In Transition Effect drop down menu, at the bottom of the Events Dialog, select the ‘Slide left’ option. Click OK.
4) Now, we’ll create a condition that will ensure that the screen swipes left. On the left-hand side of the event you’ve just created, click on the ‘add condition’ link. In the expression builder, drag the ‘label’ widget, (this can be found in the Outline window on the right-hand side), followed by the ‘<‘ function and finally type ‘5’ into the text box that follows. Click OK.
5) And next, we’ll do the same for the rest of the panels so that we can swipe left in each case. On the right of the most recent event created, and select the ‘Else’ link and add another ‘On Tap’ + ‘Set Active Panel’ event, this time selecting Panel 2. As before, select ‘Slide left’ as the transition effect and click OK. On the left-hand side of this event, click on the ‘Else add condition’ link. In the expression builder, create the following expression, and click OK.
Tip: first place the ‘&’ function, followed by the ‘>’ and ‘<‘ functions to ensure that the expression’s brackets are placed correctly. The component above the ‘Value’ drop down option is the label widget.
6) Deep breath, nearly there! We now need to add another ‘Else’ event on the right of the most recent event created with another ‘On Tap’ + ‘Set Active Panel’ event, this time selecting Panel 3 and again, a ‘Slide Left’ transition effect. Click OK and add an expression as below, taking care to add the functions in the correct order. Click OK.
7) Finally, add one more ‘Else’ event, with another ‘On Tap’ + ‘Set Active Panel’ event, this time selecting the final panel (Panel 4) and again, a ‘Slide Left’ transition effect. This time, our expression is much simpler: drag the ‘label’ widget, followed by the ‘<‘ function and then type ’20’ into the text box. Click OK.
And you’re done! You can now click ‘Simulate’ and enjoy!