In this short tutorial we’ll show you how you can integrate your weave.ly app with Google Sheets.
For the moment our integration only enables you to write data to a Google Sheet. Are you interested in also reading data from a Google Sheet into your prototype? Send us an e-mail to support@weave.ly and we’ll see if we can move it up our roadmap!
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!
Example Setup
The figure below showcases the design we’ll be using as an example for this tutorial. It’s essentially a single-screen form in which users enter some personal information. We want to store this information in a Google Sheet whenever a user presses the “Submit” button.
We assume that you are already familiar with weave.ly and how our plugin works. If this isn’t the case we suggest starting the with this tutorial. In our example we tagged each text layer of our input fields with the Text Input functionality and added an empty click interaction to the submit button. As shown below.
Setting Up Your Google Sheet with Sheety
Weave.ly integrates directly with a small tool called Sheety, which easily enables the integration of any Google Sheet. We’ll start by running you through the setup of Sheety before continuing with our example. The setup takes 4 steps:
Step 1: Create Your Sheety Account
First off you’ll need to create a Sheety account. This can be done for free using your google account at https://sheety.co/.
Step 2: Create a New Project
Create a new project by pressing the “Create Project” button in the main dashboard view and choose the “From Google Sheet” option (see below).
Enter the URL for your google sheet (you can simply copy and paste it from your browser URL bar) when prompted (see below).
Step 3: Enable Row Addition
Under the “API” tab of your Sheety project make sure to enable “Post – Add a row to your sheet” and save the URL displayed for later. The image below showcases this for our example.
Step 4: Preparing Your Google Sheet
The first row of the sheet in which you want to store data will serve as a header. In other words, it will need to specify the name of each column. From our own experience with Sheety we suggest you do not use any special characters (e.g. “,-,_, etc.) or spaces when choosing your column names. The image below showcases the sheet we’ll be using in our example.
Connecting the Blocks in the weave.ly Editor
Using the weave.ly editor you will be able to send data entered by your users to your google sheet. The starting point for our example in the editor is shown below. We currently have a number of unlinked Text Input blocks.
To send the data outputted by these blocks to our Google Sheet we first need to create a table in weave.ly’s Data Editor. Although this table will not contain any data, it will enable weave.ly to know what the schema of your data is. If you are unfamiliar with the concept of tables in weave.ly we suggest reading this tutorial first. The image below showcases the table created for our example. Our schema consists of three columns (i.e. Firstname, Lastname and Email), all of type Text. You’ll notice that our schema in weave.ly matches the header row in our Google Sheet.
The schema of your data table in weave.ly must exactly match the header of your Google Sheet for the integration to work.
Weave.ly provides a dedicated Sheety Insert block (under the Integrations section) to send data to your Google Sheet. The block will require you complete two settings. First, you’ll need to select the schema of your sheet (i.e. under the Data Table dropdown). Second, you’ll need to paste the Sheety URL from Step 3 of the previous section. The image below showcases the configuration of the block for our example.
All that is left to be done is connect our Text Input blocks to the corresponding ports of the Sheety Insert block (see the image below).
You might need to refresh your Google Sheet to see the data coming in.
