Learn how to prototype web and mobile apps

How to edit rows in your web prototypes using input forms

In this tutorial, you will learn how to edit existing records in a Data List in your interactive prototype, by using the Data Master action ‘modify’ and an input form.

You can download an example here.

1) In a web prototype, go to the Data Masters tab and create a new Data Master. Name it ‘record action update’ and create two fields: first name and last name. Then click OK.

2) Double-click on the Data Master you’ve just created and select the tab ‘View and edit records’. Write some example data there. Then click OK.

3) Now drag a Data List widget to the screen. Name it ‘samples’ and select the Data Master. Then select all its fields.

4) Right-click on the Data List and select ‘New column’. Drag a Text widget and write ‘update’.

5) Drag some Text widgets, Input text fields and a button to match the input form you can see in the example or just drag the data master to the screen to get the form.

6) Select the ‘update’ Text and go to the events tab. Add an ‘On click’ + ‘Set value’ event, and then select the ‘variables’ tab. There, create a new variable, name it as you wish, and select it. Click on the ‘Calculate’ button and drag the row (‘Current_row_1’) of the Data List to the expression builder (it’s easier to select it from the outline). Click OK twice.

7) Click on the gear icon next to the word ‘do’ and add another ‘Set value’ event, this time selecting the Input test field that will display the ‘first name’ as the component that will display the value. Click on ‘Calculate’ and build the expression displayed in the image below, by dragging the data function SELECT, the variable and the Data Master field “first name” to the expression builder:


8) Click OK twice. Now repeat the last step but this time use the ‘last name’ text and the ‘last name’ Data Master field. 
9) Select the button and go to the events tab.  Add an ‘On click’ + ‘Data master action’. Click ‘modify’ and build the expression displayed in the image below, by dragging the variable, the ‘first name’ input field and the ‘last name’ input field to the expression builder:


Click OK twice and that’s it! You can now click ‘Simulate’ and enjoy!

Next tutorial > Filter data lists using a tree