Dynamic Pages: Airtable Sorting
By default, when you use an Airtable as a data source for information displayed on dynamic pages, the sorting of the information is randomized when it is displayed. For example, if you’ve enabled the “Connect to Data” option using a List widget, then connect it to a collection that is linked to an Airtable, the list items will not be displayed in the same order seen in the Airtable. In this article, we will share a way to set up an Airtable so that items are always listed in order on your site.
The instructions below assume that you already have an Airtable set up. If you don’t, simply create a standard Airtable and populate it with items. The steps below will take place on the Without Code builder, as well as the Airtable.com site. Be sure to log in to Airtable.com.
Set up an Airtable and Without Code Collection for Sort Ordering:
- Open your Airtable and click on Grid View.
- In the “Add a view” options, select Grid.
- Name the grid. For this demonstration, we will use “grid” for the name. Note that the name you create will not affect the name of the Airtable. The view option simply creates a new view of the table, and does not affect any data in the table.
Now that we’ve set up a grid view for our Airtable, we will make a new Collection in the Without Code builder, and connect it to the Airtable grid view.
- Create a new Collection: Content > Collections > New Collection > Airtable
- Above the first field (Airtable API Key), click the link for Airtable Account Page. This will load the Airtable.com site (log in if you need to).
- Copy your API key.
- Paste the API key into the Airtable API Key field.
- Back in the Without Code builder, click on the Airtable API Page link. This will take you to the Airtable site.
- Select your Airtable from the list.
- In the sidebar, click on the name of the Airtable.
- Select “List Records” from the options that appear below your Airtable in the sidebar menu.
- Find the API URL encoder tool link, and click it.
- Scroll to the bottom of this page, and enter the name of your Airtable grid in the View section. This is what we did in the first few steps in the beginning of the instructions.
- Now on the very bottom of the page you will see the URL has been updated with the grid view name.
- Copy the URL.
- Paste the URL into the second field on the Collection creation page in the Without Code builder.
- Click the Import Fields button.
- After importing the fields and connecting your collection to a list widget, your dynamic content will now be listed in the same order it is shown on the Airtable.
- Any changes in ordering made in the Airtable will be reflected in the connected widget on your site. Just make sure to use the Refresh Data button at the bottom of your Collection page in order to capture the changes.