Published on March 12, 2023.

Airtable is an interesting cross between a database and a spreadsheet. It's essentially a relational database with a spreadsheet-like user interface, and it's that familiar interface that makes it so easy to use and so popular. Airtable has come a long way since it was introduced in 2015, having introduced features that make it easy for users to collaborate, automate tasks, and more.

Suppose that you want to provide Tulip users with easy, seamless access to inventory data. To do so, you can create an Airtable base, and then display the data that it contains by embedding a view of the base in your Tulip app. In this post, I'll show you how to do just that.

Before getting started, if you don't already have an Airtable account, click here to create one for free.

Step 1: Get the Embed URL

In this example, I've created an Airtable base using the Inventory Tracking Template. Here's what that looks like in Airtable.

Click the image to view a larger version.

By default, the base includes several views. In the image above, I'm on the Product Inventory view. There are also views that show information about Warehouse Locations, Manufacturers, and more.

To embed a view, you select the view that you want to embed, and then click on the "Share View" button (located in the top-right corner of the view). Then click on "Create a shareable grid view link." A dialog like this will appear.

Next, click on the "Embed this view on your site" link. This will open a new window, similar to the one shown below.

The HTML code that is displayed contains the URL that you need to embed the view. In this example, the embed code looks like this.

<iframe class="airtable-embed" src="https://airtable.com/embed/shrzu7RWKr7GbGtX2?backgroundColor=blue&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>

It's the "src" attribute of the iframe that we need. So continuing with the example above, that would be this value: https://airtable.com/embed/shrzu7RWKr7GbGtX2?backgroundColor=blue&viewControls=on

Copy that value. You'll need it in the next step.

Step 2: Add a Webpage Widget to Your Tulip App

Here's an animation showing how I've added an embedded Airtable view to a Tulip app.

Here are the steps that I performed.

Open the Tulip base that you want to embed the view in.

Navigate to the step that you want to embed the view in.

Next, click the Embed button, and select the "Webpage" option. If you don't have Webpage as an embed option, simply reach out to Tulip's technical support team and request that it be enabled in your account. You can click on the "?" icon in the top right corner of the Tulip window, and then select "Support Request."

Take a moment to both reposition and resize the Webpage widget. I suggest making it as large as possible.

Now we're ready to set the widget's URL. In the widget's property pane (to the right), under URL, select "Fixed," and then paste in the URL that you copied from Airtable.

You should immediately see the view embedded in the step.

That's all there is to it!

Here's one last animation that shows an embedded Airtable view in a Tulip app that's being run in Tulip Player.

Wrapping Up

In this post, I've shown how you can easily embed an Airtable view in a Tulip app. You could also use this technique to embed an Airtable form in a Tulip app to collect information from your Tulip users. For example, you might want to provide them with a form that they can fill out to report quality issues, inventory discrepancies, scrap, and so on.

I hope you've found this to be helpful. If you have any questions, please feel free to reach out.