[Live Demo] How to build an Airtable Frontend using low-code
Tags: airtable, showdev, tutorial, news
Published: 2021-09-24 13:06:17

<h3><strong>How to Build an Airtable Admin Client</strong></h3>
<span style="font-weight: 400;">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.</span>
<h3><b>Why build an Airtable Frontend? </b></h3>
<span style="font-weight: 400;">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. </span>
<ol>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">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. </span><span style="font-weight: 400;">It’s also not possible to hide certain fields from users. </span><span style="font-weight: 400;">
</span><span style="font-weight: 400;">
</span><span style="font-weight: 400;">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.</span><span style="font-weight: 400;">
</span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Also sharing these filtered views, allows users to play around with URLs and parameters in the web browser.

</span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">API response limit: Airtable APIs allow you to retrieve only up to 100 rows. Integration and automation capabilities are limited. </span><span style="font-weight: 400;">
</span></li>
</ol>
<span style="font-weight: 400;">All this can easily be fixed by integrating the Airtable database with DronaHQ and building a quick frontend application. </span>
<h3><b>How DronaHQ helps overcome Airtable Database Challenges: </b></h3>
<ol>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Drag and drop admin panel - Visually </span><a href="https://www.dronahq.com/admin-panel/"><span style="font-weight: 400;">design admin interface</span></a><span style="font-weight: 400;"> by dragging and dropping pre-built components like table grid, lists, charts, form fields, buttons. </span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">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.</span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">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 </span><a href="https://community.dronahq.com/t/embed-control/562"><span style="font-weight: 400;">embed filtered views dynamically</span></a><span style="font-weight: 400;">.</span><span style="font-weight: 400;">
</span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Retrieve more than 100 rows - DronaHQ’s </span><a href="https://community.dronahq.com/t/cursor-based-pagination/813"><span style="font-weight: 400;">cursor-based pagination</span></a><span style="font-weight: 400;"> 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.</span></li>
</ol>
&nbsp;
<h3><b>How to build a custom</b> <b>Airtable app?</b></h3>
<span style="font-weight: 400;">For the visual learners out there, we have a short YouTube video explaining the whole process in detail. In the video, we go over: </span>
<ol>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">How to connect Airtable data to DronaHQ apps</span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">How to design an Airtable admin panel</span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">How to access more than 100 rows of data </span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">How to create a CRUD interface to edit data in Airtable</span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">How to create user-based views for Airtable frontend</span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">How to design an Airtable Dashboard</span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">How to embed Airtable views with user-based filters</span></li>
 	<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">How to use Actionflows to Update or Delete Airtable records</span></li>
</ol>



[![How to build airtable gui](http://img.youtube.com/vi/4RuE455PB8g/0.jpg)](http://www.youtube.com/watch?v=4RuE455PB8g)


&nbsp;

<span style="font-weight: 400;">Step 1 – </span><a href="https://www.dronahq.com/integrating-airtable-with-dronahq-studio/"><span style="font-weight: 400;">Connect your Airtable account to DronaHQ</span></a>

<span style="font-weight: 400;">Step 2 – Configure the Airtable connector</span>

<span style="font-weight: 400;">Step 3 – Build the UI</span>

<span style="font-weight: 400;">Step 4 – Connect Away!</span>

&nbsp;

<span style="font-weight: 400;">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.</span>

&nbsp;
<h3><strong>Wrapping Up </strong></h3>
<span style="font-weight: 400;">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 </span><span style="font-weight: 400;">front-end web apps for Airtable instead of Airtable’s limited Form view</span>

<a href="https://www.dronahq.com/signup"><span style="font-weight: 400;">Signup for DronaHQ and build your app in minutes.</span></a>

&nbsp;

<a href="https://www.dronahq.com/signup/"><img class="alignnone size-large wp-image-15695" src="https://www.dronahq.com/wp-content/uploads/2021/05/stitch-data-together-1024x256.png" alt="stitch data together" width="1024" height="256" /></a>