Show Airtable Data in Bricks’ Query Loops with Bricksforge API Builder

If you’ve ever wanted to display content from another CMS on your WordPress site, you’re in luck! Imagine having a client with a wealth of content stored in platforms like Notion, Airtable, or Google Sheets, and needing to integrate that content into their WordPress site without cluttering their database. With the new Bricks Forge API Query Builder feature, this is now possible. You can build your queries just like you’re used to in the Bricks editor and loop through external API sources seamlessly.

Table of Contents

• Understanding the API Query Builder
• Setting Up the Airtable Integration
• Authentication with Airtable
• Creating Your First API Endpoint
• Fetching Data from Airtable
• Creating Dynamic Data Tags
• Displaying Data on the Frontend
• Adding Images to Your Cards
• Sorting and Filtering Data
• Conclusion
• FAQs

Understanding the API Query Builder

Bricks Forge API Query Builder allows you to pull data from external APIs directly into the Bricks Builder interface. This means you can loop through various sources like Airtable and display that content on your WordPress site without actually importing it into the database. Let’s explore how this works and the steps involved.

For instance, let’s say you have multiple APIs available. You might have posts from another WordPress site or images from a service like Pixels. You can loop through these sources and display them on your site without altering the WordPress database. This is particularly useful for clients who want to showcase their content dynamically.

Setting Up the Airtable Integration

To demonstrate the capabilities of the API Query Builder, let’s set up an integration with Airtable. This will involve creating a query that fetches data from an Airtable table containing various tools. The beauty of this process is that you don’t need to import this data into your database; you can simply call it via API.

Before we dive into the setup, remember that this feature is available in Bricks Forge 3.4 and is still experimental. It’s recommended not to use it on production sites just yet.

Authentication with Airtable

First, you’ll need to authenticate using a personal access token from Airtable. This token grants access to your Airtable data and is crucial for pulling in the necessary information. Here’s how to set it up:

1. Go to your Airtable account settings and navigate to the API documentation.
2. Click on authentication to create a new token. Make sure to give it the appropriate permissions to read records.
3. Copy the personal access token generated, as this will be needed for authentication in Bricks Forge.

Creating Your First API Endpoint

Now that you have your personal access token, it’s time to create your API endpoint in Bricks Forge:

1. In Bricks Forge, navigate to extensions and ensure the API Query Builder is turned on.
2. Create your first endpoint by adding a new endpoint and naming it “Airtable.”
3. Paste the Airtable API URL you copied earlier into the appropriate field.
4. Next, you’ll need to input your personal access token as a bearer token in the authorization section.

Fetching Data from Airtable

Once you’ve set up your endpoint, you can fetch data from Airtable. This is where the magic happens! When you click fetch, you’ll be able to see the records from your Airtable table displayed directly in Bricks Forge.

Make sure to clear the cache if you encounter any issues fetching the data. Once fetched, you’ll see all the records, including tool names and descriptions, ready to be displayed on your WordPress site.

Creating Dynamic Data Tags

To effectively display this data on your site, you need to create dynamic data tags. These tags allow you to pull in data that isn’t stored in your WordPress database but is coming from your Airtable API. Here’s how you can do it:

1. Create a new page in WordPress for your Airtable demo.
2. Add a section and a block within that section to create a card for each tool.
3. Within the card, add a heading for the tool title, a description, and an image placeholder.
4. Instead of selecting static text, choose dynamic data and select the relevant fields from your Airtable data.

Displaying Data on the Frontend

After setting up the dynamic data tags, you can now view the data on the frontend. As you navigate to the page you created, you should see all your tools displayed correctly. Each card should show the tool name, description, and any images associated with it.

Adding Images to Your Cards

While displaying text data is straightforward, adding images from nested arrays can be a bit more complex. To include images, make sure to enable nested arrays in your API Query Builder settings. This allows you to access all the necessary fields for the image, including the URL.

Once you’ve enabled nested arrays, you can select the logo field to display the corresponding images correctly for each tool card. If you encounter issues where the same image appears for all items, ensure you’re using the correct query type for the logo.

Sorting and Filtering Data

Another powerful feature of the API Query Builder is the ability to sort and filter the data before displaying it. You can pass in query parameters to sort by tool name or any other field, allowing you to present the information in a structured manner. This is particularly useful for clients who want their data displayed in a specific order.

To sort your data alphabetically, you can add a query parameter for sorting and specify the direction (ascending or descending). This gives you full control over how the data is presented on the frontend.

Conclusion

The new Bricks Forge API Query Builder is a game-changer for WordPress developers. It opens up a world of possibilities for integrating external data sources like Airtable directly into your WordPress site. By leveraging this feature, you can offer clients dynamic solutions that utilize their existing content without cluttering their databases.

As this feature evolves, expect to see more integrations and enhancements that will make working with external APIs even easier. Whether you’re pulling in Google reviews or any other external data, the potential is immense.

What are your thoughts on using APIs in WordPress? Have you encountered any challenges or successes in integrating external data? Share your experiences in the comments below!

FAQs

• What is Bricks Forge? Bricks Forge is a powerful tool that extends the functionality of the Bricks Builder, allowing for API integration and data manipulation.
• Is the API Query Builder feature stable? As of now, it is experimental, and it is recommended not to use it on production sites until further updates are released.
• Can I use other APIs besides Airtable? Yes, you can integrate various external APIs as long as they provide the necessary endpoints and data formats.
• How do I authenticate with an API? Authentication typically requires a token or key, which you can obtain from the API provider’s settings or documentation.
• Will this affect my site’s performance? Fetching data from external APIs can impact performance; therefore, caching and optimizing requests is recommended.