OnDataChange: speed up your data-driven prototyping
In this tutorial, we will show you how to use the OnDataChange in your interactive prototypes.
This new event trigger, introduced with the latest release, prompts events when a value changes in a Data List or Data Grid, saving you time and making things easier when creating data-driven prototypes. Let’s see how to use it.
In this example, we will create a form listing a series of names and a corresponding status for each one of them: active/offline. The list will be sortable per name and status.
You can download the below example here.
1) Create a new web prototype and, from the Data Master tab, create a new Data Master. Name it “users” and add two fields clicking on the + icon on the right hand side. Name them “Name” and “State”. Click OK.
2) Double click on the Data Master you’ve just created to re-open it and, in the “View and edit records” tab, in the Name column insert random names (of your choice), and in the State column randomly insert Offline or Active. Click OK. It’s important to fill in all names and states-if you leave the default values as they are, the prototype won’t work correctly.
3) Now click on the Data List widget: a pop-up dialog will show up. Insert a Data List identifier and select the “users” Data Master you’ve just created from the drop-down list, moving both the “Name” and “State” Data Master fields from the left box to the right, using the arrows. Click OK, and position the Data List on the canvas, and edit the style as preferred. Remember that in the canvas you will only ever see an empty row in the Data List (as shown in the image below). To view the results, you need to click on the Simulate button.
4) Now let’s add the icons for “Active” and “Offline” on the left side of the first name field: drag a Dynamic Panel inside the second row and resize to fit. Then, create an additional sub-panel. Drag two Check Box widgets onto the canvas and add one within panel_1 (representing the “Active” status) and one within panel_2 (“Offline”). Customize the Check Box icons to represent checked and un-checked check boxes respectively.
5) Now it’s time to add the interactions. First of all, we will add them to the two Check Box icons. Let’s start with the first, the “Active” check box. We need to change the status to “Offline” when we click on it. To do this, select the Active icon, add an “On Click” + “Data Master Action” event. In the events dialog, select “Modify” and build the expression you can see in the image below, dragging the “Current_row_1” row in the first value (“Current_row_1” is the default name), leaving the “Name” value empty, and writing “Offline” in the “State” value. Click OK twice.
6) Do the same with the “Offline” icon: add an “On Click” + “Data Master Action” event and build the same expression, this time writing “Active” in the “State” value. Click OK twice.
7) Now we want the row to turn gray when the status of the user is offline, and white when their status is active. Back in the canvas, select the “Current_row_1” row of the table from the Outline window and add an “On Data Change” + “Change Style” event. In the events dialog, select the “Current_row_1” row of the table as the component you want the change the style of and select a white color for the background. Click OK to go back to the canvas.
8) We need to add a condition to this event, by clicking on the “add condition” link on the left hand side of the events we’ve just created. The condition will be: when the ‘users state’ is Active. In the expression builder, drag the header, an “=” and then write “Active” in the final value. Click OK.
9) In the events tab, right click on the event we’ve just created and add a “Set Active Panel” action (by choosing “Add action after selected”), selecting the “Panel_1” of the dynamic panel as the active one. Click OK.
10) Now click on the “Else” link and add another “On Data Change” + “Change Style” event, again selecting the “Current_row_1” row of the table as the component you want the change the style of. This time select the gray color for the background. In the events tab, right click on this event we’ve just created and add a “Set Active Panel” action (again by choosing “Add action after selected”), selecting the “Panel_2” of the dynamic panel as the active one. Click OK.
And that’s it, you can now simulate the form you’ve just created!
Note: in the example prototype, the two columns are sortable. If you’re not already familiar with sortable columns, please check this tutorial.