ToolJet is a low-code platform enabling developers to rapidly build and deploy custom internal tools. It offers drag-and-drop pre-built components for developers to build complex applications with ease. It also provides a wide range of data sources and APIs. This tutorial aims to integrate data sources with the Tooljet app we will build.
How to Create Tooljet App
Launch the ToolJet web platform on the browser and select Try for free.
Fill the required information and create an account.
Select Create an app from the left side panel.
Give it a nice name and you are done.
Congrats, you created your first Tooljet app.
Now we have successfully created our first app on ToolJet. It's time to integrate data sources. In this tutorial, we use GitHub API as a data source and will integrate and display the data on Canvas with the pre-built Table component.
How to Integrate Data Source with App
Right now the interface of our application is similar to below.
There are three different sections of our app
left side panel for app controls
right side panel for components
middle panel is divided into two sub-sections
one is our app canvas
Query panel.
Connect Data Source
Click on the Add button from the data source and select REST API.
Add this API (https://api.github.com/users) in the URL input box and click on run button.
We are successfully able to get the data in JSON format.
Now drag and drop the table component from the right side panel.
The table component comes with dummy data you can see it on the table component.
Click on the Table component and the right side you can see the default data we need to remove.
Write the query {{queries.restapi1.data}} in the data section.
We can see our data on the Table component.
Conclusion
By following this guide, you have successfully connected to a data source in ToolJet, fetched data, and displayed it in a Table component. This process can be applied to various data sources and use cases, enabling you to create dynamic and data-driven applications with ToolJet.