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
| Steps |
|---|
| 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.
Next Step
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 incorporate and display the data on Canvas with the pre-built Table component.
Integrate GitHub API with ToolJet
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.
How to Connect with Data Source(GitHub API)
| Steps |
|---|
| 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 the 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. |
| Click on the Table component and on the right side you can see the default data remove it. |
Write the query "{{queries.restapi1.data}}" in the data section. |
We can see our data in the table component.
Wrap-up
In this guide, we 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.
DM for Collab ✍🏻 - ganeshpatil.work@gmail.com
Top comments (0)