Learn how to prototype web and mobile apps

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!

Next tutorial > Add records to a Data List using input forms


  1. Satish

    June 8, 2015 at 12:10 pm

    When you make an input through the form, the data list gets populated while the form does not get cleared. Any trick to do that would be great.

    • Lidia Rodriguez

      July 3, 2015 at 7:46 am

      Hi, you can create a ‘Set value’ action that will set the values to blank after submiting the form.

  2. Philip

    August 18, 2015 at 6:18 am


    I am simulating a similar form completion to populate a Data List on the same page. However, in my New expression, I am setting my three values with an input field, a custom select list, and a multi-select list.

    In addition I have a custom button set up to Set Value with a calculated expression of only my Data Master dragged in.

    When I go to click this button, no rows are added and all of my value inputs have selection or text in them. I’m not sure what is going wrong.

    Thanks for any help,


    • Philip

      August 18, 2015 at 6:45 am

      Problem occurred because of either a faulty button, or because to button had too many (7) tasks that required it to hide UI elements. Created a new button and reassigned the hide tasks with success.