How to integrate Bubble with Baserow

Baserow is central to no-code stacks that include data capturing, processing, and logic that powers workflows. As an API-first platform, Baserow integrates with other tools—such as Integromat/Make, Zapier, n8n, and more—to create a complete stack that powers enterprises of all sizes.

Bubble is a no-code platform that allows users to create web applications without writing code. One of the features of Bubble is its ability to connect to external databases, allowing users to store and retrieve data from their applications. Integrating Bubble with Baserow API can help streamline your workflow and data management. With Bubble’s API Connector plugin, you can set up connections to Baserow from your Bubble application and create a Bubble workflow action to automatically create new data rows.

What we’ll do

In this tutorial, you’ll learn to automatically add information to a table on Baserow from an app. We will walk you through the steps to connect to a Baserow database via the Bubble API Connector, so you can get started with building powerful data-driven applications.

We’ll follow these steps:

  • Set up a Baserow database
  • Create a Baserow database token
  • Get parameters from the database API doc
  • Develop an app using Bubble
  • Install the API connector plugin on Bubble
  • Set up Baserow API authentication
  • Create a Bubble workflow action

What we’ll need

We will integrate no-code tools. These are the tools we need:

Let’s get into how to use API to manage and populate your Baserow database.

1. Set up a Baserow database

First, log into Baserow. Then, create a workspace by selecting the ‘+ Create workspace’ button in the dashboard.

Name your workspace, and select the ‘Add workspace’ button.

Once you’ve created a workspace, add a database from scratch to the newly-created workspace or add a database from the template library.

A new table will be created when you create a new database from scratch. Add the following fields to the database table:

Field name Field type
Name Single line text
Email Email
Company Single line text

https://baserow-media.ams3.digitaloceanspaces.com/pagedown-uploads/690d1f79-e29c-4413-9dd2-3a7c7f2f72af/Screenshot\_2023-02-20\_at\_16.50.06.png

2. Create a database token

Within your Baserow user account, you can create multiple unique database tokens that allow Baserow to connect with other apps. You can create and find the database token under your account settings.

To create a database token:

  1. Go to your profile, then navigate to your Settings page
  2. Click on the Database tokens tab
  3. Click on the Create token + button
  4. Write a descriptive name for the token, and select the existing workspace that you want to tie the token to
  5. Click on the Create token button to create a new database token for the selected workspace and the authorized user.

https://baserow-media.ams3.digitaloceanspaces.com/pagedown-uploads/7c34b4a4-b14f-4f0a-a1e4-6682835e3956/Screenshot\_2023-02-20\_at\_15.48.56.png

API tokens provide similar functionality to login credentials, but they provide additional security and flexibility. A token, like your username and password, should be kept secure and handled with the utmost confidentiality.

Creating database tokens is available to all Baserow users; you don’t need to be on a paid plan.

3. Get parameters from the database API doc

To connect this database with Bubble, we need access to the database API documentation. Click on the vertical ellipsis  beside the selected database to access the API documentation. Then, select ‘View API Docs’ from the workspace menu.

This API documentation is automatically generated and specifically based on the tables and fields in your selected database.

https://baserow-media.ams3.digitaloceanspaces.com/pagedown-uploads/4884ee0e-5162-487d-a9c0-933a6a335b48/Screenshot\_2023-02-20\_at\_16.06.06.png

You may view all the newly created fields as well as other endpoints. Copy the HTTP method and the endpoint that defines the requested action.

Baserow API follows REST semantics, uses JSON to encode objects, and relies on standard HTTP codes, machine and human-readable errors to signal operation outcomes.

4. Develop an app using Bubble

Create a new app on Bubble or start from one of the ready-made apps and templates created by the Bubble community.

For this tutorial, we’ll install the CRM & Sales Pipeline Lite template.

https://baserow-media.ams3.digitaloceanspaces.com/pagedown-uploads/fefb4982-126f-4960-88ad-7e6a0a9360f0/Screenshot\_2023-02-20\_at\_14.58.50.png

5. Install the API Connector plugin on Bubble

To create a Bubble workflow action that creates a new row of data, we must first install the API Connector in Bubble. The API Connector allows you to set up connections to Baserow from your Bubble application.

The API Connector can be found in the plugin gallery from the Plugins tab. To install the plugin, navigate to the Plugins section of the Bubble editor and click Add plugin. Search for *API Connector, then click the Install button.

https://baserow-media.ams3.digitaloceanspaces.com/pagedown-uploads/123b57ed-9f34-436f-a514-e4753bcea6bc/Screenshot\_2023-02-20\_at\_14.46.28.png

Once installed on your app, the plugin requires further configuration for each API and each call desired. We now need to connect our Baserow database to our Bubble app.

6. Set up Baserow API authentication

We want to connect our database to Bubble using the API connector plugin.

Click the Add another API button to set up authentication and the different call(s) we want to use. You can set up headers, parameters and a call, and each call can be set up to be used as an action in your app or as a data source.

  1. Set the API service name as ‘Baserow
  2. Set the Authentication as Private key in header
  3. Set the key as ‘Authorization’ and the value as ‘Token YOUR_DATABASE_TOKEN’. Replace the placeholder with your Baserow database token created in Step 2 above.
  4. Get the specific headers from the API documentation. Shared headers will be added to every call in the relevant API.
  5. https://baserow-media.ams3.digitaloceanspaces.com/pagedown-uploads/7b414771-192c-4260-9adb-ed3cd1eb7025/Screenshot\_2023-02-20\_at\_16.28.50.png
  6. Set the API call name as ‘Create row’.
  7. The Use as dropdown lets you select whether to use that particular API call as a data source or an action. Use as “Action” makes the API call available as an action in your Workflow editor.
  8. When a call is made to a specific resource, we need to specify an HTTP method that tells the server what action we want to initiate. Select POST to create data.
  9. Paste the endpoint copied from the Baserow database API documentation.
  10. Add the Request body. Use <> for dynamic values in Bubble.
  11. https://baserow-media.ams3.digitaloceanspaces.com/pagedown-uploads/9f78806e-e781-46c3-a16f-67e82f125d73/Screenshot\_2023-02-20\_at\_19.12.32.png
  12. Click the Initialize button to ensure the call works and see the server’s response.

Once you configure an API call, you need to initialize it. If you don’t, it will not appear in the Bubble editor. Initializing a call runs/executes it. If a call deletes an item or creates an item that requires a unique ID, the Initialize call button will delete or create the item (if successful).

Bubble will make an API call to your base and display the response schema. Make any necessary changes to your data.

Click Save.

With the API Connector plugin and Baserow API authentication set up, you can now create a Bubble workflow action to create a new row with data from the app.

7. Create a Bubble workflow action

To connect and sync our Baserow account, we can create a row in Baserow from Bubble data. Creating a record in your Bubble app database is like adding a new row to your Baserow table.

To set up the workflow action, create a button or other user interface element to trigger the workflow action. When the user clicks the button, Bubble will make an API call to Baserow, adding the data to your database.

  1. Create a workflow and an action where you’ll pass the input values.
  2. Find API action calls in the workflow editor under Plugins. Then, select the “Create Row” API call we created.
  3. https://baserow-media.ams3.digitaloceanspaces.com/pagedown-uploads/de3b7801-7484-4291-9c3a-ae86347f8f73/Screenshot\_2023-02-20\_at\_17.18.28.png
  4. From there, you can specify the data you want to add to your Baserow database. You can use dynamic values in Bubble to add data to your Baserow database.

Bubble will send the values in a format Baserow can understand.

https://baserow-media.ams3.digitaloceanspaces.com/pagedown-uploads/66d2039c-0cff-4c0f-ae15-4e98389147d3/124999c616dc3d0a68f92fb3053f2e238af654d7.webp

Add data in your app to populate the table on Baserow.

https://baserow-media.ams3.digitaloceanspaces.com/pagedown-uploads/6fab4fd1-43e6-4707-a5cc-87a847875429/254a7f5447cf26a7658ae204e931031c1c547c33.webp

Next steps

You can also modify a row in Baserow using Bubble

  1. Create a popup and input fields.
  2. Pass the relevant data to display the current value of the row as initial content.
  3. Specify the initial content of the input fields to display the current record data. The initial value of any input field is the initial content.
  4. Create a workflow where the user clicks on an edit button to show the popup displaying the current information.
  5. Dynamically pass the data using workflows.
  6. Trigger a workflow when the button ‘Update’ is clicked to modify the selected row in Baserow.

https://baserow-media.ams3.digitaloceanspaces.com/pagedown-uploads/346f8721-e98e-4ce8-8312-9d05d259d69e/Screenshot\_2023-02-20\_at\_17.48.02.png

Key takeaways

By following the steps outlined in this blog post, you can easily set up Baserow API authentication and create a Bubble workflow action to add data to your Baserow database. With this integration, you can easily manage your data and streamline your workflow, saving you time and effort.

If you run into any issues following this tutorial, feel free to reach out and ask for help in the Baserow community.

What’s your use case? Tell us how you use Baserow!