How to use Baserow data in your Appsmith application

How to use Baserow data in your Appsmith application

Using the API to connect Baserow and Appsmith can be a powerful approach to streamlining your data management and application development operations. You can easily build custom applications and automate processes by integrating Baserow’s powerful database capabilities with Appsmith’s user-friendly interface.

Baserow is scalable, so it can handle large amounts of data and users, making it appropriate for businesses of all sizes. It also allows for simple integration with other tools and services via APIs, webhooks, and plugins, allowing developers to easily build powerful and complex applications.

Using the Baserow and Appsmith API connection, you can create anything from a simple data visualization tool to a complex business app. The possibilities are unlimited because of Baserow’s robust database capabilities and Appsmith’s user-friendly UI.

What we’ll do

In this tutorial, we’ll walk you through the steps to connect Baserow and Appsmith using API and help you unlock the full potential of these tools. What we need to do is:

  1. Set up a Baserow database
  2. Create a database token
  3. Create an API datasource in Appsmith
  4. Get Baserow parameters
  5. Make query to list Baserow rows (GET)
  6. Add widgets in Appsmith

What we need

These are the tools we need:

How to connect Baserow and Appsmith using API

1. Set up a Baserow database

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

To add a workspace, give it a name first and then click the + Add workspace button.

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

Use a template

2. Create a database token

To build an app in Appsmith with Baserow data, you’ll need to connect Appsmith to Baserow. Within your Baserow user account, you can create multiple unique database tokens that allow Baserow to connect with other apps.

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

To create a database token:

  • Click the profile at the top of the screen, then navigate to the Settings page.
  • Click the Database tokens tab.
  • Click the Create token + button.
  • Write a descriptive name for the token, and select the existing workspace with the table to connect. Set the permissions as needed for the application.
  • Click the Create token + button to create a new database token for the selected workspace and the authorized user.
  • https://baserow-backend-production20240528124524339000000001.s3.amazonaws.com/pagedown-uploads/1b80ebe7-6a02-4b65-832b-27949b0916f4/Create a database token.webp

With the database token generated, we can commence building the front end on Appsmith. We will need the token, so keep this page open.

3. Create an API datasource in Appsmith

Next, create an Authenticated API data source to query the Baserow database or API inside Appsmith. This will ensure that the token is saved on the server instead of being exposed in the editor, which is a more secure approach.

You will be able to enter your Baserow database token and use your own data.

To connect Baserow and Appsmith using API, click the (+) to add a new data source then follow these steps:

  • Name: Specify a name for the API data source.
  • URL: Specify the URL for the Baserow API endpoint as “https://api.baserow.io”.
  • Provide the required query parameters and HTTP headers for the API request, if necessary.
  • Authentication type: Define an authentication type for REST APIs as “API Key”. You only need to configure the headers and query parameters once and don’t have to do it for each API request after that.
    • Set the Authentication Key as: “Authorization”.
    • Paste the Baserow database token into the Value field.
    • Set the Add To field as “Header”.
    • Set the Header Prefix as “Token”.
  • The header should be in the following format: “Authorization: Token YOUR_API_KEY”. Replace “YOUR_API_KEY” with the database token you created in Step 2.
  • Send Appsmith signature header: Ensure that the incoming requests originate from Appsmith.
  • https://baserow-backend-production20240528124524339000000001.s3.amazonaws.com/pagedown-uploads/c83e6398-fcbf-4cfa-b96d-e7370ab46f61/Create an API datasource in Appsmith.webp

4. Get the required Baserow parameters

To connect the Baserow database with Appsmith, we need access to the database API documentation. To get the API documentation, click the vertical ellipsis ⋮ beside the selected workspace and select View API Docs from the workspace menu.

You can browse the database’s automatically generated API documentation. We will need these parameters to build a query. You may view all the newly created fields as well as other endpoints:

https://baserow-backend-production20240528124524339000000001.s3.amazonaws.com/pagedown-uploads/d09d94fd-aa75-4abb-8219-6552ba0e2169/Get the required Baserow parameters.png

5. Make query to list Baserow rows (GET)

We will now build a query for the Baserow data source that we connected in Step 3.

A query is a request for data or information from a database table or combination of tables.

When a query is made in Appsmith, it first goes through the Appsmith server, where the credentials are added to the request. However, the response to the query is sent back directly to the client, meaning that the query responses never go through the Appsmith server.

Create the GET request to read data from your Baserow table.

  • Click the (+) to add a new Query/JS and choose ”Baserow data source Query” created in Step 3.
  • Rename the API to “getRows”.
  • Set the method to GET.
  • Paste the URL from the API documentation. The URL should be in the following format: https://api.baserow.io/api/database/rows/table/TABLE_ID/?user_field_names=true.
  • Update the URL with theTABLE_ID from your table. Replace TABLE_ID with the name of the table you want to access. Find the Table ID by clicking on the three dots next to the table. It’s the number between brackets.
  • In the Params section of the settings, add any query parameters that you want to use to filter the data from Baserow.
  • Once you have configured the API settings, you can test the connection by clicking the Run button.

If everything is set up correctly, you should see a response from Baserow with the data from your table. The response will contain the rows from your table.

6. Add widgets in Appsmith

Finally, add a widget to your Appsmith page to display the data from Baserow.

  • Choose the widget that you want to use, e.g. the table widget, on the right side pane under Connections > Add new widget.
  • Configure the widget to use the data from the Baserow API.

That’s it! You have now connected Baserow and Appsmith using API.

Summary

By following the steps outlined above, you can easily connect your database and start building. You can use this to build robust applications that interact with your Baserow data.

In case you’ve run into an issue while following the tutorial, feel free to reach out to ask for help in the Baserow community.

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