What is Sheety?

Sheety allows you to use Google spreadsheets as a database and use the information stored in the spreadsheet to be used as a REST API. The API can be used to create prototypes and apps. For Sheety to serve your spreadsheet as an API, it needs to be in a particular format. With a few tweaks to your spreadsheet, you can make it compatible with Sheety.

Connect Sheety with Draftbit

Setup steps in Sheety

If you don't have a Sheety account, create on here. To get familiar with Sheety, check out their getting started guide.

Before you start with Draftbit, make sure you a Google Spreadsheet created. To create a new spreadsheet:

  • From docs.google.com/spreadsheets, under the Start a new spreadsheet section, click on the Blank template.
  • You can start from scratch or start from an existing template (in this case, make sure to follow Sheety guidelines to format data in the spreadsheet).

For this guide, we will use a Google Spreadsheet created from scratch.

Get your REST API URL:

  • From the Sheety dashboard, click on the New Project drop-down menu and select From Google Sheet.
  • Paste the Google Sheet URL
  • On success, it will read the Sheet name. This gives you chance to verify that the data to be used is coming from the correct sheet in the spreadsheet
  • Click Create Project to generate a Sheety API project.
  • On creating a new project, API documentation is generated as well as the REST API endpoint.
  • After fetching the API URL, enable the REST endpoints you want to include or use in your Draftbit app.
  • Each endpoint such as POST, PUT, and DELETE are disabled by default.
  • You will have to enable each one of them by the toggle button next to each endpoint.

Get Authentication Token:

Sheety allows you to generate your Authentication token. It is required to access the API.

  • From the API tab, go to the Authentication tab.
  • From the left-sidebar that says Type, select the authentication type to Bearer (Token).
  • Then add a custom Token in the input field and save the Authorization Header value which is to be used in the next section.
  • Click Save Changes from the left-sidebar.

Setup steps in Draftbit

To access the API in the Draftbit app, you need the pass the Authentication token as the global variable.

  • Open the Settings tab on left-navbar.
  • In the Project Settings, navigate to Global Variables.
  • Enter a key to access the Authentication token and the value for it.
  • The Authorization token value requires you to enter a Bearer token. The syntax is Bearer <YOUR_TOKEN>.
  • In place of paste your own <YOUR_TOKEN> (from the previous section) and then click Add.
  • Click Save.

To add the Sheety API URL to your Draftbit app:

  • Open the Data tab on left-navbar.
  • From the Add a service menu, click on Rest API.
  • Enter a name for your REST API.
  • Paste your REST API URL (from the previous section) into the Base URL input field.
  • Click the + from the Headers section to add a new Header.
  • Type Authorization for the Key.
  • Select the Global Variable for Authorization_Sheety_API (from the last step).
  • Click Save.

Available Sheety recipes for Draftbit

Fetch data from Sheety API into a List in Draftbit

To a blank screen in Draftbit, add a nested Fetch component, List component, View component, and a Text component so that your Layer Tree looks like this:

Inside of the View component, you can place as many Text you would like to be rendered for each entry in your data set.

The next step is to create an endpoint. Let's try fetching the data using the GET request:

  • Click Create new endpoint.
  • Enter a name for this endpoint.
  • Click the Test button next to the Endpoint input to make sure you've successfully connected to your spreadsheet.
  • Once everything looks right, click Save to close the modal.
  • Select the Fetch component in the Layer Tree and select the Service you have created.
  • Select the Endpoint you want to fetch the data from.
  • Select the List component in the Layer Tree.
  • Change its Mapped Value to data.sheet1 under the Data Tab.
  • Now you can configure a Mapped Value on each Text component you have inside the View of your Fetch component.
  • Here is also a Preview mode is shown on how the data is fetched from the service API.

Add new data from a Draftbit app

You need to use a component that:

  1. accepts user input and
  2. has a Field Name prop to POST data to a spreadsheet using Sheety API.

Examples of these include:

Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Sheety service.

In the new endpoint you'll need to:

  • Enter a name for the Endpoint.
  • Change the Method to POST using the dropdown.
  • On the right-hand side of the modal, click the Body Structure tab and insert the request of the body. This will differ depending on the fields you have in your spreadsheet.
  • The value of the field is going to be the value of the Field Name prop in Draftbit. This is generally assigned a default value whenever you add a TextInput component in your Draftbit app. To add it in the Body Structure, it needs to be inside the double curly braces as: {{FIELD_NAME_PROP_VALUE}}. The information regarding this is also given in the Body tab.
  • In the Body tab you can provide a Test Value for {{FIELD_NAME_PROP_VALUE}}. A Test value is a temporary value that can be used for variables during development.
  • Click the Test next to the Endpoint to test if the endpoint is working correctly.
  • Click Save.

Below is a general breakdown of what the request will look like. You're able to add multiple fields to a request, just make sure you include a comma after each field.

{
  "sheet1": {
    "title": {{textInputValue}}
  }
}

You can add the POST endpoint to submit the data entered in the Draftbit using the TextInput component and Touchable component.

  • On the Touchable component go to the Interactions tab (the last tab).
  • Click the + to open a drop-down menu in the Action tab and select the option Submit Data.
  • Setup the Submit Data by selecting the Service and the Endpoint.
  • Then add the configuration for body request to be sent by selecting the value for textInputValue.

Now you can make a POST request to add new data from the Draftbit app.

Update data from a Draftbit app

The PUT request is used to update the single entry in the spreadsheet. It accepts similar input components as mentioned in POST request and the request is triggered using a Touchable component.

To navigate from the main screen of the app to the screen where the updated value is entered and then eventually the PUT request Endpoint is triggered, the initial step is to create a new screen with a TextInput component, a Touchable component, and a Text component.

  • Select the Touchable component that is specified for updating a value in-app screen.
  • Go to the Interactions tab.
  • Click the + to open a drop-down menu in the Action tab and select the option Navigate.
  • Set the Destination option to point to a new screen where the value can be updated.
  • In the Pass Data option, click the + to add a key-value pair.
  • Add the ID as the key and then select its value to be passed to the navigation screen.

You'll need to create a new endpoint in your Sheety service. In the new endpoint you'll need to:

  • Enter a name for the Endpoint.
  • Change the Method to PUT using the drop-down.
  • Adding the {{ID}} of the row in the spreadsheet to update in the Add Path & Params input.
  • Add a Test Value for the ID to test the Endpoint.
  • On the right-hand side of the modal, click the Body Structure tab and insert the request of the body. This will differ depending on the Fields you have in your spreadsheet.
  • The value of the field is going to be the value of the Field Name prop in Draftbit. This is generally assigned a default value whenever you add a TextInput component in your Draftbit app. To add it in the Body Structure, it needs to be inside the double curly braces as: {{FIELD_NAME_PROP_VALUE}}. The information regarding this is also given in the Body tab.
  • In the Body tab you can provide a Test Value for {{FIELD_NAME_PROP_VALUE}}.
  • Click the Test next to the Endpoint to test if the endpoint is working correctly.
  • Click Save.

Delete data from a Draftbit app

The DELETE request is to the Sheety API with an item's Object ID to remove that particular record from the table.

You'll need to create a new endpoint in your Sheety service. In the new endpoint you'll need to:

  • Enter a name for the Endpoint.
  • Change the Method to DELETE using the dropdown.
  • Adding the {{ID}} of the row in the spreadsheet to delete in the Add Path & Params input.
  • Add a Test Value for the ID to test the Endpoint.
  • Click the Test next to the Endpoint to test if the endpoint is working correctly.
  • Click Save.

Using a Touchable component and an Icon component, you can add the endpoint for the DELETE request.

  • Select the Touchable component and go to the Interactions tab.
  • Click the + to open a drop-down menu in the Action tab and select the option Submit Data.
  • Setup the Submit Data by selecting the Service and the Endpoint.
  • Then add the configuration by selecting the value for ID.

Did this page help you?