Creating PDFs with the Page Designer in Airtable

Introduction to Airtable Page Designer

The Page Designer extension is an official extension developed by the Airtable team that allows users to create custom documents (e.g., invoices, purchase orders, checklists etc.) that include data from their Airtable records.

Page Designer comes with a pretty easy to use drag and drop editor so you can really customise the look and feel of your documents. It's also really easy to include data directly from your Airtable records - It's as easy as simply clicking on your chosen data record and it will then be included in your document.

That said, the Page Designer has long been a source of frustration within the Airtable community. There are quite a few limitations that mean it's just not suitable for all document generation use cases. As a result, a number of services have cropped up to meet this need - indeed DocuPotion is one of them!

For those interested in the history of the Airtable extensions marketplace (who isn't??) the Page Designer was originally released as an Airtable 'Block' way back in 2018 (thank you wayback machine for the below image).

Airtable Blocks from 2018

Airtable eventually renamed 'Blocks' to 'Apps' in 2020 and then to 'Extensions' in 2023, but the Page Designer has been present through all iterations of the Airtable marketplace.

When should you use the Page Designer extension?

The page designer extension is best used if you're creating single page PDFs of a known length and you don't need the PDF to be part of an automation (as you'll need to manually save down every PDF you create).

There is a way of creating multi-page documents using the Page Designer that we explain below, but it's a bit of a workaround and not ideal for most multi-page use cases.

So think relatively simple single page invoices, purchase orders, certificates and other documents like that.

If you're generating more complex / multi-page PDFs or need the PDF generation to be part of an automation, you're likely best off looking for a third-party solution.

Installing the Page Designer extension

To install the Page Designer extension, click on the 'Tools' button in your Airtable base and select 'Extensions'.

Installing extensions in Airtable

Click on the 'Add an extension' button and select the Page Designer. As of the time of writing, Page Designer is one of the extensions featured by Airtable so you should see it immediately.

Featured extensions in Airtable

If it's not displaying in the featured section, you can find it by selecting the 'Extensions by Airtable' tab.

Official Airtable extensions

Once you've selected Page Designer, you can install it by clicking on the 'Add extension' button.

Add Page Designer extension

Once you've installed the Page Designer extension, you'll be asked to choose:

What table you want the document to be linked to
The dimensions of your document

Setting Page Designer dimensions

We're going to be designing a PDF for an Invoice, so we've linked the Page Designer to our 'Invoice' table, set the size to Letter and the orientation to Portrait.

Invoice example: structuring your Airtable database

Let's say we want to design a single page invoice PDF. Before we get into the actual design of our invoice in the Page Designer, we need to make sure our records are set up appropriately.

In the image below, we have a table called 'Invoices' that has the following columns:

Customer Name (single line text)
Address (single line text)
Invoice Number (number)
Grand Total (rollup)
Line Items (linked records)

Airtable database structure for invoices

The linked record links the 'Invoices' table to the 'Line Items' table. The 'Line Items' table includes information on each product that's going to be included in our invoice:

Line items table structure

Invoice example: designing a document in the page designer

Navigate back to the Page Designer extension. Depending on how your table is structured, you'll likely already have an element on the canvas. In our case, we have the 'Customer Name' field on our canvas.

Default Page Designer canvas

The Page Designer allows you to add both: 1) static elements and 2) fields from your table. For our invoice document, we're going to use a mixture of both.

However, you can also include fields from your table in the static elements. For example, in the below image we've added the following text to a static text element:

text

Bill to:
{Customer Name}

Static text with custom field

Wrapping text in { } tells Airtable that this is a field from your table. This will be replaced with the value of that field in your document.

The field names are case sensitive. So if you have a field in your Airtable table called 'Customer Name', the 'C' and the 'N' must be capitalized in Content input.

Adding linked records allows you to reference data from other tables in your Airtable base. We've added the 'Line Items' field to the canvas in the image below.

Linked table in Page Designer

By default, linked records appear as a Table, but you can also display them as a list:

List mode for linked records

Or as 'Inline' (which is basically a single line string):

Inline mode for linked records

In our example, we're going to be sticking with 'Table' mode. We can add more columns to the table by clicking on the 'Add Column' button in the left-hand sidebar. We're going to add in values for the 'Price of Product', 'Quantity' and 'Total' so our table looks more like what you might see in a professional invoice.

Adding columns to table

We're also going to add in our 'Grand Total' field so that users can see the total cost of the products in the invoice.

Adding grand total field

Page Designer automatically shows the first record in your table in the canvas. But you can see how the document will look for other records by using the 'Next record' or 'Go to record' controls:

Alternating between records

Saving the template as a PDF

In order to save your document as a PDF, click on the 'Print' button. A popup will appear that allows you to specify:

Which record you want to use in the output PDF
The image quality (Good, Better, Best, Original)
The paper size
Orientation
Page margin

Print options in Page Designer

Once you've picked your preferred settings, click the 'Print' button. A dialog box will open up that prompts you to 'Print' your document. However, you can save your document as a PDF by simply changing the 'Destination' to 'Save as PDF'.

Save to PDF option

Click the 'Save' button, choose a location on your device and your PDF will be downloaded.

Limitations of Page Designer

If you've gone through the process of designing a PDF document with Page Designer, you'll probably have noticed a few frustrating limitations. You're not alone. The Airtable community has been pretty vocal on the shortcomings of the Page Designer extension over the years. Here are some of the most common limitations cited.

Not able to automatically upload PDFs to a field in your table

Many Airtable users want to include PDFs of their documents in their actual Airtable records. They may have an 'Attachment' field to store these PDFs. This is possible with several third party tools (including DocuPotion), but unfortunately it's not possible to do this with the Page Designer extension.

It is possible to download the PDFs generated by Page Designer to your local machine and then manually upload them 1-by-1 to your Airtable table.

But this is oh so painful.

The pain of manually uploading attachments in Airtable

Page Designer can't be used in an Airtable Automation

There's no way to include Page Designer in an Airtable automation. This may not be an issue if you're looking to generate a one-off PDF on a periodic basis, but if you want to create a meaningful amount of PDFs on a regular basis this is a big blocker.

Tables don't automatically expand to accommodate length of data

In our invoice example, we included our 'Line Items' linked record. It worked ok because we always had between 1-3 line items for each record. However, let's say we had a record that had a larger amount of line items (say 6 for this example):

Table with 6 line items

We could run into the below issue.

Line items table cut off

Not all 6 Line Items are showing in the table because the table doesn't automatically expand based on the number of records being displayed. This can be a major problem if you have an unknown number of items in your linked record.

The DocuPotion template editor has a table component that does automatically adjust based on the number of records being displayed.

Can only be used for single page documents

The Page Designer was designed to handle single page documents. So if you're looking to create a multi-page PDF, it's likely not the best choice. This often rules out the Page Designer for documents like contracts and proposals.

There is a workaround that can be used to print multi-page documents if you know exactly how many pages will be in your PDF - see the next section for full details on this. However, even with this workaround, there's no way to add page breaks to ensure certain elements start on a new page.

Bonus tip: designing multi-page PDFs with Page Designer

If you know exactly how many pages are going to be in your PDF, you can use this trick to generate multi-page PDFs with the Page Designer.

Let's say we want to generate a PDF with 4 pages using the 'Letter' dimensions. When you open Page Designer for the first time, you'll be asked to choose the record size. Instead of choosing the 'Letter' option, select 'Custom'.

Custom record size option

The default values in the 'Width' and 'Height' fields will be equal to the width and height of the record size that was previously selected. In our example above we previously had 'Letter' selected which means the dimensions needed for a 1-page Letter PDF are 927px width by 1199px height.

If we had 'A4' as the previously selected record size and THEN chose 'Custom', the default dimensions would be 901px width by 1274px height.

Dimension format changes

This is really useful information because we're going to multiply the height value by the number of pages in our PDF to get our 'Custom' height value. For our 4 page 'Letter' PDF, the height value will be:

1199px * 4 = 4796px height

The canvas now represents a 4 page document. However, there's no way of knowing when one page ends and the next starts. The solution to this is to add a plain image with dimensions equal to one page to the canvas. For our example, we're going to create a plain white image in Canva with a width of 927px and a height of 1199px.

Creating plain image in Canva

If you're designing the image in Canva you'll need to add at least one element to the image before being able to download it. We recommend adding a simple rectangle with a white background that takes up the full width and height of the Canva graphic.

In order to reference the image in Page Designer, you'll need to upload it somewhere so that a public URL is available. One way of doing this is by creating a new Airtable table (we've called ours 'Utilities') and adding an attachment field to it.

Attachment field in Airtable

Open up the image then right-click on it and select 'Open image in a new tab'. Copy this URL.

Getting image URL from Airtable

Navigate back to your Page Designer and add an Image to the canvas. Set the Image URL to the URL you copied when opening the attachment in a new tab.

Image on canvas

Next, set the width to be equal to the width of your chosen page size. We're designing a 'Letter' sized PDF so we'll set the width to be 927px. The height value should be the height of 1 page of your PDF. A 'Letter' sized page is 1199px.