Find and fix web accessibility issues with ease using axe DevTools Pro. Try for free!
The Airtable web app is pretty neat. You can use it like a spreadsheet but it's useful for all sorts of other things too. The neatest thing about it for me is that it has an API so that you can treat it like a database.
I've been thinking about making weekly notes for the different teams I work with at Gusto to read about what the design systems team is working on, things we've fixed, and any bugs we've encountered during that might impact other designers and engineers across our organization. I've spent a couple of hours thinking about how we might use Airtable to collect a whole bunch of data and then use its API to extract that info and show it in a web app.
Here's an example of what we'll end up building, which is basically a React web app that's using Airtable as a nifty sorta CMS:
To get started, we have to head on over to the command line and run the following (but first make sure npm is installed):
This will create a new directory called airtable-test which is where we'll be making our little React app. If we run yarn start in the command line after that's finished installing, then we'll see the default page for the project:
And, if we open up src/App.js in that airtable-test directory, we can see how this page is being rendered with React:
Now that we have React up and running, we can go ahead and install airtable in the command line which will let us interact with the Airtable API:
Once we've done that, we'll need to create an Airtable account and create a project. We should wind up with something like this spreadsheet:
Now we can then head to airtable.com/api and select our project so that is serves as data we're pulling from. In this case, I selected 'Design Systems Projects' which you can see right at the bottom here:
Convert your airtable base to websites with ease. Embed Airtable Gallery on Your Website. Display Airtable records as if they're part of your website. This extension generates a gallery of Airtable records that blends into your website. It automatically adjusts its height based on the content. This extension is perfect for displaying arts or portfolios. An Airtable Form can also be embedded in a website, to get the feedback from the website users. Airtable integration. Airtable's API can be used to connect to other web services by which information can be exchanged between external web applications and Airtable. Using the Zapier platform, Airtable can connect to over 450 applications. Find templates for project plans, strategy, engineering and more. Browse through the largest collection of free templates for product managers, carefully curated by the FYI team.
This will send us to a handy docs website that gives us an incredibly easy to read API for our specific project! Scrolling down we'll find our API key which we'll need to access this data as well as a ton of examples that we can use to manipulate the data we get back:
Let's head back to App.js in our airtable-test directory, delete all the code in that file, and replace it with the following:
Make sure to replace those Xs with the details that you can see in that Airtable API doc we just opened. But now that we've done all the setup, we can finally get around to creating our interface by calling data from our spreadsheet.
In App.js we can start to construct the App component:
All this will do for now is setup the app's state and then render 'Hello' on the page. Next up, we'll be add each record from Airtable to that state.
First thing that's important to note below: in componentDidMount() we'll be selecting Updates which is just a way of telling Airtable that we want the spreadsheet called Updates. Make sure that this name is the same name as the spreadsheet. We'll also be looping through all the records, or rows, of our table in that function too:
fetchNextPage() is the Airtable API's way of giving us the next record in our spreadsheet and it's neat that it will keep going until there are no more records. Again, we're not doing anything with that data yet; we only want to make sure everything is working correctly at this point.
Open up the console in DevTools and we should see something like this:
And if we dive through each of the objects in this array, then we should find all the data from the spreadsheet! Doing this bit always feels like magic to me.
Anyway, next up we can update our render() function like so:
We're going to be looping through the state that we setup earlier and then rendering the record.fields[] for each column in our spreadsheet. We have a Date, UI Kit, and Component Library column, and once we've updated our App.js with the code above, we should see all the content from our spreadsheet!
It's like magic! But why does this data look so weird? Well, it's because I wanted to write Markdown in each cell, so now we'll need to use a parser to convert that data into good ol' fashioned HTML. First, we need to head back to the command line though:
How to check your ip address. showdown will help us parse all that Markdown we've written in our Airtable spreadsheet. After installing it, we only need to import it at the top of our App.js file, like this:
After the componentDidMount() function, we can create another function that will create our HTML using showdown:
It's a little iffy, but it makes me feel like the code is a bit tidier this way. Now we can update our render() function:
We're doing a couple of new things here: we're using dangerouslySetInnerHTML in each div which, in turn, uses our createHTML function to convert the data from each column (specifically, the UI Kit and Component Library columns). We're also converting the dates of each row into headings to make things a bit easier to read.
And with that we're pretty much done! Here's the final App.js:
There's still a ton of updates we could make to improve things. I took a first pass at styling, but we probably want to do things like improve the date format and maybe have some kind of indication as to which updates refer to which rows in the spreadsheet. Maybe we could even toggle showing which information to show depending on whether you're a designer or engineer.
Anyway! I think this is a good start to getting to grips with the Airtable API and I'd love to hear about how you use it in the comments below.
| Collaborative software | |
| Founded | 2012 |
|---|---|
| Headquarters | San Francisco, California, US |
| Founder(s) |
|
| Industry | Internet |
| URL | airtable.com |
| Registration | Required |
| Current status | Active |
Airtable is a cloud collaboration service headquartered in San Francisco. It was founded in 2012 by Howie Liu, Andrew Ofstad, and Emmett Nicholas.
Airtable is a spreadsheet-database hybrid, with the features of a database but applied to a spreadsheet. The fields in an Airtable table are similar to cells in a spreadsheet, but have types such as 'checkbox', 'phone number', and 'drop-down list', and can reference file attachments like images.[1][2]
Users can create a database, set up column types, add records, link tables to one another, collaborate, sort records and publish views to external websites.
Airtable Api
History[edit]
- 2012: Airtable founded.[3]
- Feb 2015: Raised $3 million from Caffeinated Capital, Freestyle Capital, Data Collective, CrunchFund.[4]
- April 2015: Airtable launches its API and embedded databases.[5]
- May 2015: Raised $7.6 million funding from Charles River Ventures and Ashton Kutcher.[6]
- July 2015: Introduced Airtable Forms to collect and organize data.[7]
- August 2015: Airtable made 'Add to Slack' option available to integrate Airtable with Slack.[8]
- December 2015: Airtable redesigned its iOS app.[9]
- December 2015: Airtable introduced barcode as new field type.[10]
- March 2018: Raised $52 million in Series B funding; announced the launch of Airtable Blocks.[11]
- November 2018: Raised $100 million in Series C funding.[12]
- September 2020: Raised $185 million in Series D funding.[13]
- March 2021: Raised $270 million in Series E funding.[14]
Basic components[edit]
Airtable has six basic components:[15]
- Bases: All the information needed to create a project is contained in a Base. Bases can be built from existing templates provided by Airtable. They can also be built from scratch, from a spreadsheet or from an existing Base.
- Tables: A table is similar to a spreadsheet. A base is a collection of tables.
- Views: Views show the result sets of data queries and can be saved for future purposes.
- Fields: Each entry in a table is a field. They are not just restricted to hold text. Airtable currently offers 16 basic field types.[16] These are: single-line texts, long text articles, file attachments, check-boxes, single select from drop-down list, multiple-selects from drop-down lists, date and time, phone numbers, email ids, URLs, numbers, currency, percentage, auto-number, formulae and barcodes.[17]
- Records: Each row of a Table is a Record.
- Workspaces: A workspace is a collection of Bases in Airtable.
Key features[edit]
Linking between tables[edit]
To avoid the need to form a single large table when there is related data in multiple tables, Airtables provides an option to link records of different tables. Airtable allows linking existing tables of related records, creating a new linked table and also multiple links between existing tables.[18]
Collaboration[edit]
Airtable allows multiple users to work simultaneously on the same Base allowing more productivity at workplace. A new collaborator is added by clicking share button found at top of Base and providing the email ID of the collaborator. The owner can set the permission level of collaborator while sharing the Base.[19] There are three permission levels in Airtable Base, namely 'Creator', 'Edit Only' and 'Read Only'.
If multiple Bases are required then a Team is formed in Airtable.[19] An Airtable Team can hold multiple Bases and collaborators of the Team can work on all the available Bases in the Team. There are four permission levels in Team, unlike for a Base which only has three. The extra permission level in Team is Owner, who has full access to Team Base.
Publishing views[edit]
Bases can be easily shared with the public. One need not have an Airtable account to view the published Bases. These view-only Bases shared in public are called Airtable views. What can someone do if they have your ip address. These views can be embedded into one's own website and allows the website users see the real-time information in Base, without needing them to have an Airtable account. One possible use-case is Airtable Form, which can be used to take a survey of a product. The feedback received from a customer can also be shown to public by sharing the Airtable View.
Airtable Forms[edit]
Airtable introduced Forms in July 2015.[7] Forms could be used to collect data from others like co-workers, customers or the public. A Form can be easily created from an existing Base, and the data collected by the Form is automatically organized in the Airtable Base. Airtable allows user to organize the required fields in the Form. A separate link is created for every Airtable Form. This link can be shared with others to get the required data. An Airtable Form can also be embedded in a website, to get the feedback from the website users.
Airtable integration[edit]
Airtable's API can be used to connect to other web services by which information can be exchanged between external web applications and Airtable. Using the Zapier platform, Airtable can connect to over 450 applications and websites. Changes can be set up as triggers for actions in connected applications.[20]
Snapshot[edit]
Airtable provides a greater sophistication to backup the data than just allow the users to undo/redo. Airtable periodically snapshots the Base. When a previous version of a Base is needed, the appropriate snapshot is selected by the user from the snapshots list. In addition, the user can manually snapshot a Base at any time.[citation needed]
Airtable Website Template
Mobile apps[edit]
Airtable introduced its version 2.0 iOS application on December 2015,[9] allowing users to work on tables from their iPhone. Airtable for Android is also available.[21]
API[edit]
Airtable provides an API to provide ability to users to build applications that cannot be built within the table constraints. A key, which is present at overview section, is necessary to use Airtable's API. The key should be kept secret. The API follows REST semantics, uses JSON to encode objects, and uses standard HTTP codes to signal operation outcomes.[22]
Initially, the user has to create a Base in Airtable. Then, Airtable's API can be used to create, read, update, or delete records (i.e. CRUD). As of 2016, Airtable's API does not allow users to create or modify the Base schema.
Airtable Website
Security[edit]
It also uses 256-bit SSL/TLS encryption in data transit.[23]
See also[edit]
References[edit]
- ^'Airtable review: A drop-dead easy relational database management system'. Macworld. Retrieved January 26, 2017.
- ^Martin, James A. '3 ways Airtable for iOS can help you ditch spreadsheets'. CIO. Retrieved January 26, 2017.
- ^'Airtable | CrunchBase'. www.crunchbase.com. Retrieved February 8, 2016.
- ^Lawler, Ryan; Contributor. 'With $3M in Funding, Airtable Makes Complex Databases Usable on Your Mobile Phone'. TechCrunch. Retrieved February 6, 2016.
- ^Russell, Kyle. 'Airtable Launches Its API And Embedded Databases'. TechCrunch. Retrieved February 6, 2016.
- ^'Airtable lands $7.6M round to help build simple, extensible database apps'. VentureBeat. Retrieved February 6, 2016.
- ^ ab'Create Forms in a Snap!'. Covering Bases. Retrieved February 6, 2016.
- ^'Airtable and Slack: Keeping Your Team In Sync'. Covering Bases. Retrieved February 6, 2016.
- ^ ab'Airtable Introduces Newly Redesigned iOS App to Make Database Creation Available to Anyone With an iPhone'. Marketwire. Retrieved February 6, 2016.
- ^'A Brief History of Barcodes'. Covering Bases. Retrieved February 6, 2016.
- ^'Airtable Raises $52 Million and Launches Airtable Blocks..'BusinessWire. March 15, 2018. Retrieved March 16, 2018.CS1 maint: discouraged parameter (link)
- ^Lunden, Ingrid (November 15, 2018). 'Airtable, maker of a coding platform for non-techies, raises $100M at a $1.1B valuation'. TechCrunch. Archived from the original on April 15, 2019. Retrieved April 15, 2019.
- ^'Airtable raises $185M and launches new low-code and automation features'. TechCrunch. Retrieved September 14, 2020.
- ^'Cloud-based software company Airtable'. mg21. April 20, 2021.
- ^'An Introduction to Databases – Airtable Guide'. Airtable Guide. Retrieved February 7, 2016.
- ^'Setting Up Field Types – Airtable Guide'. Airtable Guide. Retrieved February 6, 2016.
- ^'Guide to the basic field types'. Airtable – Support. Retrieved February 7, 2016.
- ^'Linking to another record'. Airtable – Support. Retrieved February 6, 2016.
- ^ ab'Collaborating with a Team – Airtable Guide'. Airtable Guide. Retrieved February 7, 2016.
- ^'Airtable Integrations'. Airtable. Retrieved February 6, 2016.
- ^'Here's how to use Airtable, the user-friendly spreadsheet app that's taking Silicon Valley by storm'. Business Insider. Retrieved August 8, 2018.
- ^'Airtable – API'. airtable.com. Retrieved February 15, 2016.
- ^'Airtable security practices'. Airtable – Support. Retrieved February 6, 2016.
Air Table Free
