How to Get Data From Airtable in Kodular

Sharing Is Caring:

In Kodular we use Airtable as a Database to store data and get data from Airtable. In this post, we are going to show you a detailed tutorial about how you can easily get data from Airtable and show it in your Kodular App. So let’s start the tutorial.

How to Get Data From Airtable in Kodular
How to Get Data From Airtable in Kodular

What is Airtable?

Airtable is spreadsheet base database where we store data in the spreadsheet and that data we can call from our apps and display in the app. We can use Airtable to store login data, Use to store Image Link, Texts and many more. We use Airtable so we can save most of the details online. It helps us to reduce the app size and we do not need to update the app every time we want to upload new content.

Airtable has many plans but we will use the free plan. Airtable free plan is capable to do our works. If you have a Wallpaper app, In that case, you can store the Image Link and Title of Images in Airtable. Then you do not have to update your app whenever you want to update new Wallpaper or Remove any old wallpapers you already stored in Airtable.

This is only one example you can use Airtable for any purpose that depends on you.

You May Also Like

How to Recast Extensions to Support AndroidX Libraries

Setting Airtable Account

In order to use Kodular, you have to create an account on Kodular. Just follow the below-given steps to setting your Airtable account perfectly.

  • Create an account on Airtable first to use their services.
  • Check your email and verify your Airtable account.
  • On the Dashboard you will see and option to create a Workspace.
  • Inside Workspace you can add Base.
  • Change Base Name and Thumbnail if you want, we change it to Test.
  • Click on Base Name then spreadsheet will open.
  • After the Spreadsheet open you will see 4 columns by the name of Name, Notes, Attachments, and Status.
  • We need only 2 columns so we keep 2 columns and delete others.
  • After that, we rename Name column with Tittle and Notes column with Link.
  • We will store Image Links and name in the rows. Do not create any empty Rows otherwise Kodular will not get any data.
  • Store Data in the respective columns.
  • After that click on Help button available in the top right corner. After that you will see API Documentation. Click on that.
  • There will be two options by the name curl and Javascript and a Tick Box where writen show API key.
  • Select Javascript and Tick the show API key box.
  • Now will see your API Key and Base Id copy them.
  • Remember Table Name, Column Names, API Key and Base Id. All these will be required to Get Data
Web capture 12 9 2021 155641 airtable.com
Screenshot of API Key and Base ID
Web capture 12 9 2021 155848 airtable.com
Screenshot of Data We Stored on Airtable

Also See This

Our Latest App Made With Kodular and Airtable

Get Data From Airtable in Kodular

Now after we have stored data in Airtable and Get all the data like Table Name, Column Names, API Key and Base Id. Now Open Kodular and Drag the Spreadsheet component. We have store Tittle and Image Link so we also drag an Image and a tittle component with two spreadsheet components. We took 2 spreadsheet components because we have 2 columns in Airtable. We also can use only 1 Spreadsheet component but then the block part will be a little bit complex for the beginners. We also renamed the spreadsheet component so it will be easy to make blocks.

Web capture 12 9 2021 16244 creator.kodular.io

When you will drag and drop the Spreadsheet component it will ask for API Key, Base ID and Table Name.

Web capture 12 9 2021 161925 creator.kodular.io

Fill in all the details like above and do not change the View Name. Now move to the block section and Follow the blocks that are given below.

blocks 3
How to Get Data From Airtable in Kodular 8

And the result of live testing is given below

photo 2021 09 12 16 35 30 edited
Screenshot of Data we get

Explanation of Blocks

So when the screen opens we use our Tittle Spreadsheet column and we use the Get column block of spreadsheet component for that. In column name, we put the Value Tittle because we want to get the data from the Tittle column and in the max record, we put the value 1 but you can also put the numbers of rows which data you will call. We generally put 1200 because you can not store more than 1200 rows of data in the table in Airtable. This is the only limitation of the free plan I hate the most.

After Tittle_Spreadsheet got the data from Airtable we use a Label to show the data. And after that, we again call data using Link_Spreadsheet to get data from Link Column.

After Link_Spreadsheet got data from Airtable we use an Image component to show the Image which link we have stored in Airtable.

Conclusion

At the end of the post, we will only tell you that your thinking is the only limitation to work with Airtable. There are many types of Databases is available which you can use also like Firebase, Google Spreadsheet. But according to me, Airtable is the simplest Database among all of them in terms of implementations. Though its free plan has many limitations but it is also capable to handle a good amount of traffic load also. The data you stored in Airtable is secured until and unless you shared the Base Id and API Key of your Database with anyone. If you like the simple tutorial about How to Get Data From Airtable in Kodular then share the post with your friends and if you face any problems then comment below.

Leave a Comment