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 the + button labeled Add Element or Container within an empty container
- From the Elements tab, select Airtable Details element


Refer to the Screenshot below:






Configuring Airtable



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


1. Expand the Airtable Connection option in the Airtable Details editor and click on the + button under the Token option to add an Airtable token.





2. To generate an Airtable token, go to the Airtable dashboard. From here, click on the Account (1️⃣) option and select the Developer hub (2️⃣) option, as shown below.

Or you can go to this link- https://airtable.com/create/tokens





3. Click on the Create Token button and then follow the steps shown in the video below:





4. Go back to the builder and click on the + button under the Token option. Then, give it a Name and paste the Token you copied in the previous step.





5. Then, choose the Airtable details layout style using the Select Layout option.




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: 13/05/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!