1. Home
  2. Quick Start Lessons
  3. 4. Capturing & Storing User Input
  1. Home
  2. Weave.ly Editor
  3. 4. Capturing & Storing User Input
  1. Home
  2. Figma plugin
  3. 4. Capturing & Storing User Input

4. Capturing & Storing User Input

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:

  1. Adding columns (click on the “+” sign on the right of the screen)
  2. Deleting/Renaming columns (using the three-dot menu of the column)
View of the data editor before you create a table

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 “Table Row Create” 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.

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 “Table Row Create” 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. A final “Table Row insert” block ensures that the newly created row in your table is saved in our databases. The image below shows the final result when all the blocks are connected.

Updated on December 16, 2022

Was this article helpful?

Related Articles