Download the interactive tutorial if you want to build the following steps yourself.
Section 4 of that Figma file contains the relevant wireframes.
Don’t feel like reading through the tutorial? Don’t worry we got you covered. Sit back, relax and let us run you through it in this video!
The weave.ly Data Editor
Weave.ly comes with its own spreadsheet-like data interface which enables you to easily store and edit data to be used in your prototype. In a nutshell, to store data you’ll need to do two things.
Spreadsheet Data Editor
First, you’ll want to create a table to contain your data. You can do this through the “Data” tab in the weave.ly editor. After clicking on the big “+” sign (see image on the left below) you’ll be able to edit your newly created table (see image on the right below) by:
- Adding columns (right click anywhere in the data editor)
- Deleting/Renaming columns (using the three-dot menu of the column)
Table Blocks
Once you have a table setup you can start writing and reading data to and from it. In this tutorial we’ll focus on writing data. You can add data to a table using the “Insert Row” block. In contrast to others this block isn’t generated by the weave.ly plugin but you’ll need to drag&drop it from the side menu in the editor. The block will automatically contain the input ports needed to accept the data from your app. These ports are automatically determined based on the columns of your table. A (black) trigger port enables you to specify when the row should be stored in the table.
Example, a Simple Form
Let’s have a look at a concrete example using a simple form. The wireframes for the form are shown above. The first screen asks users to input their name and age and once the user’s data is stored the second screen is shown. Tagging the text layer in both input fields using the Plugin would result in the following block setup.
Example, Step 1: Creating a Table
In our example we want to collect two values inputted by users: their name and their age. As such we need to create a table with two columns: one containing textual values and another containing numeric values. In other words, our table should look like as such:
Example, Step 2: Connecting the Blocks
Once your table is created you can drag the “Insert Row” block from the left side-menu onto the canvas. By connecting the output from the input fields to the block you instruct weave.ly to create a row in the table each time the user provides input and presses submit. The image below shows the final result when all the blocks are connected.
