How to add rows to a Data List in your web prototypes
In this tutorial, we’ll look more closely at the Data Master action “New”, which we’ll use to create a new row in a Data List by inputting data from a form.
You can download an example here.
1) Create a new web prototype, go to the Data Masters tab and create a new Data Master.
2) Name it ‘record action save’ and create two fields: first name and last name. Click OK.
3) Double-click on the Data Master you’ve just created and select the tab ‘View and edit records’. Write some example data there. Click OK.
4) Now drag a Data List widget to the screen. Name it ‘samples’ and select the Data Master. Then select all its fields.
5) Drag three Text widgets and two Input fields widgets to draw the input form you can see in the example, or just drag the Data Master to the screen to create a form.
6) Drag a Button, select it and go to the ‘events’ tab. Add an “On click” + “Data master action” event. Press the button ‘new’ under the Data Master “record action save” and build the expression displayed in the image below, dragging the “First name” input field in the first value and the “Last name” input field in the second one:
7) Click OK twice to go back to the canvas. Now click on the icon gear next to the word ‘do’ in the Events tab and select ‘add action’. Add an “On click” + “Set value” event, selecting the entire Data List as the component that will show the value, and the “Calculated” radio button. Then click on “Add expression” and drag the Data Master ‘record action save’ from the Data Master tab to the expression. Click OK twice.
That’s it! You can now click on Simulate and try to add more rows to your list!