How to edit rows in a Data List in your web prototypes
In this tutorial, you will learn how to edit records in a Data List in your interactive prototypes.
You can download the below example here.
‘Product List’ Screen
1) In a web prototype, create three screens: ‘Product List’, ‘Edit product’ and ‘Edit product confirmation’. Click on the screen ‘Product List’ in the Screens tab to open it.
2) Create a Data Master with 4 fields in it (Name, Description, Price and Photo) and name it ‘Products’.
3) Drag a Data List of the ‘Products’ in the ‘Product List’ screen.
4) Double-click on the Data List to edit the cells. Select the ‘product name’, go to the Events tab and add an ‘On click’ + ‘Set value’ event. In the events dialog, click on the Variables tab, create a variable and call it ‘Product’. Select it and click on the Calculate button. Then, drag the row that holds the data (not the header) ‘Current_row_1’ of the Data List to the expression builder. It’s easier to use the Outline tab in this case. Click OK twice to return to the canvas.
Note: the row clicked by the user is the one that will be saved in the variable.
5) Drag the ‘product name’ to the screen ‘Edit product’. That will add a navigation event to that Text.
Note: the variable stores all the information of the instance displayed in the row (in this case, all of the product information) and not only the information displayed in the columns. Therefore, when changing the screen, the variable contains a product, not an image and text.
‘Edit Product’ Screen
1) Drag the Data Master ‘Products’ from the Data Master tab to the canvas. Then drag a Button.
2) Select the first input field. Go to Events tab and add an ‘On page load’ + ‘Set value’ event. Then, select the same input text as the one that will change its value and click the ‘Calculate’ button at the bottom.
3) In the expressions builder, drag the data function SELECT to the expression. That function can extract a value from a Data Master record. Drag the ‘Product’ variable to the first gap. Select the Data Master tab and expand the ‘Product’ Data Master. Then drag the ‘Name’ field (that corresponds to name of the input field) to the second gap in the expression. Click OK twice to return to the canvas.
4) Repeat step 3 for all input fields.
The ‘Edit Product’ screen will display the details of the row selected in Product List, stored in the ‘Product’ variable. Now we’ll need to save the new values in several variables to send them to the next screen. Let’s do it.
5) Create one variable per input field in the ‘Edit Product’ screen.
6) Drag each input field to its variable.
7) Drag the button to the ‘Edit Product Confirmation’ screen. Now, open that screen.
Edit Product Confirmation screen
1) Drag one Text widget per variable (created in the previous screen). Rename each Text widget to display the value of each variable. Drag each variable to the corresponding Text widgets.
2) Drag a Button to the canvas. Select it and add an ‘On click’ + ‘Data Master action’ event, selecting the ‘Modify’ option.
3) In the expressions builder, drag the “product” variable to the first gap. Then drag each variable to the corresponding fields. Click OK twice to go back to the canvas.
4) Drag the Button to the ‘Product list’ screen and open that screen.
5) Click on ‘Simulate’. If you follow the entire flow from the ‘Product List’ screen, you’ll see how the rows are updated each time you make a change.