Articles on: Airtable Elements

Airtable Details

Getting Started



The Airtable Details element allows you to populate data from an Airtable base through Airtable’s API. With the Airtable details element, you will be able to create a customizable details page for the data in your Airtable base and showcase them using this element. Users can choose from our in-built templates or start from scratch and build their own UI. This article will cover how a user can add and edit the Airtable Details element.


Adding the Airtable Details element



Follow the steps below to add Airtable Details to your site.

- Click on Add Element in an empty row and section
- From the Airtable Elements section, select Airtable Details

Refer to the GIF below:



Configuring Airtable



To configure Airtable, follow the instructions and steps given below:

- Click on the Airtable Details element
- Expand the Airtable Connection accordion
- Go to airtable.com and login
- Visit your profile at airtable.com/account
- Copy the API key
- Go back to your website builder
- Click on the “Add New API key”
- Give the key a name
- Paste the API key
- Press the Save button

Refer to the video below to see the above steps visualized:-




Setting Up the Airtable Details Element



To set up the Airtable Details Element and configure your Airtable Base, follow the steps listed down below:

- After configuring Airtable, select your Airtable base
- Choose any data table from your Airtable base
- Choose any layout from the dropdown

Opening an Airtable Details Page from other Airtable Elements



You can open an entire Airtable Details page by connecting it to another Airtable Element.

Here is a typical use-case scenario:

- You have various products on an Airtable base
- You want to showcase them on your website
- You want people to be taken to a customized page upon clicking on an item they want to view
- To do this, go to your CMS Dashboard, click on Design and Pages
- Choose the Pages option from your website builder, go to any existing page or create a new page.
- Add a new section on the page and add the Airtable Details element
- Configure it with the Airtable base
- Populate data from your Airtable base into the Airtable Details element
- On a different page, add a new section and add any Airtable element, for this scenario, let us pick the Airtable Grid Element
- Configure the Airtable Grid Element and load data from the same Airtable base as the Airtable Details element
- Expand the Layout Configuration accordion on the Airtable Grid editor
- Choose the Action Type as Page
- Under the Select Page option choose the page where your Airtable Details element is located
- Done!

How the above steps should work:




Fields



This option lets you change the fields inside the Airtable Details element. There are two types of fields that you can make changes to:

- Default Fields (empty in the ‘Start from Scratch’ layout)
- Custom Fields

Users can add their own fields aligning with the columns on their Airtable base. The example below shows how a user can add fields when they use the “Start from Scratch” layout on the Airtable Details element:




Layout Styles



This option lets you customize the element, it consists of the following editing options:

- General Style
- Main Section Style
- Sidebar Style

In this example, we are using the ‘Profile Details’ layout, refer to the videos below:-

General Style



Main Section Style



Sidebar Style

Updated on: 29/01/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!