DEV Community

Gayatri Sachdeva for DronaHQ

Posted on • Originally published at dronahq.com

[Live Demo] How to build an Airtable Frontend using low-code

How to Build an Airtable Admin Client

Airtable is a cloud-based project management system. According to the company’s website, it is a spreadsheet-like database solution.  This spreadsheet-database hybrid features powerful capabilities to create and share relational databases. With a simple and visually pleasing user interface, Airtable allows anyone to create a database in minutes. Users can store, organize, collaborate on information like inventory, sales leads, new orders placed, delivery partners onboarded, employee directories, and more.

Why build an Airtable Frontend? 

While users love how they don’t need to learn SQL or how scripting works, there are situations where Airtable is not a complete solution. 

  1. Airtable is highly customizable, yet, when it comes to user-based permissions, it is not as customizable as everything else. The platform only supports 3 levels of permission control similar to that of Google Sheets - Edit, Comment, View. It’s also not possible to hide certain fields from users. Manually creating filtered views: Everyone that has access to a specific table will be able to see everything, which can lead to situations where you’ll find yourself duplicating tables and workspaces just to filter information to certain users, effectively doubling your work and muddying your databases.
  2. Also sharing these filtered views, allows users to play around with URLs and parameters in the web browser.
  3. API response limit: Airtable APIs allow you to retrieve only up to 100 rows. Integration and automation capabilities are limited.

All this can easily be fixed by integrating the Airtable database with DronaHQ and building a quick frontend application. 

How DronaHQ helps overcome Airtable Database Challenges: 

  1. Drag and drop admin panel - Visually design admin interface by dragging and dropping pre-built components like table grid, lists, charts, form fields, buttons. 
  2. User Management - Granular permissions allow admins to create levels of access that a user or a group of users can have on an app. You can configure who has full access, edit access, view access, delete access and so on.
  3. Embed filtered views with browser caching off - Instead of manually adding filters to create user specific views or permission specific views of your table, DronaHQ allows you to embed filtered views dynamically.
  4. Retrieve more than 100 rows - DronaHQ’s cursor-based pagination support returns offset for the next page content instead of numeric pagination which is supported by the relational databases (like Airtable, MongoDB and so on). This feature uses the Offset value to scroll through various pages based on the previous page’s offset value.

 

How to build a custom Airtable app?

For the visual learners out there, we have a short YouTube video explaining the whole process in detail. In the video, we go over: 

  1. How to connect Airtable data to DronaHQ apps
  2. How to design an Airtable admin panel
  3. How to access more than 100 rows of data 
  4. How to create a CRUD interface to edit data in Airtable
  5. How to create user-based views for Airtable frontend
  6. How to design an Airtable Dashboard
  7. How to embed Airtable views with user-based filters
  8. How to use Actionflows to Update or Delete Airtable records

How to build airtable gui

 

Step 1 – Connect your Airtable account to DronaHQ

Step 2 – Configure the Airtable connector

Step 3 – Build the UI

Step 4 – Connect Away!

 

All that’s left to do now is connect the APIs added in Step 2 to Controls added in Step 3. To do this, you can click on any control. Click on bind data on the top right, click on “connector”, and select the connector you made on Step 1. Once you do this for all controls, your admin panel is now ready! You can preview it to ensure it works and publish it when ready to share it with your organization.

 

Wrapping Up 

Follow along and learn how to build a frontend for your Airtable data. See how you easily build a powerful front end for Airtable as a database, learn how to send data to Airtable from an app, and create secure access controlled views for different users. Easily build front-end web apps for Airtable instead of Airtable’s limited Form view

Signup for DronaHQ and build your app in minutes.

 

stitch data together

Oldest comments (0)