Do you know that you can access the Adalo database through API? I m going to show how you can pull Adalo database data & display it on your Appsmith.
[
Appsmith | Build & self-host internal tools
Quickly build any custom business software with pre-built UI widgets that connect to any DB, GraphQL or REST API, controlling everything with Javascript.
Orange IconJOSEPH PETTY, FOUNDERGreenflux
](appsmith.com)
First, you need to be able to access Appsmith. You can either
- Host it locally on your machine
- Find any hosting with docker and set up your Appsmith instance,
- Sign up for the cloud-based Appsmith to try it.
I choose the easiest way for this demo; you can select the best option for your scenario. After signup and login my account, the first thing is to create a project.
The project will call "Untitled application", so rename it to something more meaningful.
Your project currently is pretty blank; let's start with adding the Datasources. Choose the Datasources on the left menu, click on the + button, you will see lots of resources options. For Adalo, let's select the Create new API
[
External Collections with APIs - Adalo Resources
](help.adalo.com/integrations/external-collec..)
You can take a look at how to get the API / Bearer Token for your Adalo collection first; after that fill into the Appsmith Datasource editor
- this is the API endpoint URL, which should be something start with api.adalo.com/xxxxxxxx
- Set the Authorization Header with the Bearer token
- Try to run it, and you will see the response body, this show that the query has been running successfully.
- You can see some of the widgets available for this; let's add a table widget.
As you can see, the table shows all the data pulling back from the Adalo API; it's pretty raw and without relationship data; let's tweak it
I added the $ prefix for my pricing column.
For some reason, my license show "P" & "Personal" due to some early mistake, so instead of changing the data source, I can manipulate while displaying and show all as "Personal."
What about the relationship data?
As you can see, this is my "buy" datasource, the API doesn't return my component details, so I add my component datasource and will do a match in the column.
{{Component.data.records.filter(obj => {return obj.id === currentRow.Component[0] })[0].Name }}
The code takes the component data and matches the component id in this buy table again; it returns the component name when it is matched. Unfortunately, I m not good at javascript; please share with me if you have more elegant code for this.
That's all for today. I hope you pick up something new here!