Are you building internal tools using Airtable and Internal? Here’s a few tips and tricks to make your life easier.
How to visualize Airtable data with charts & graphs
While you can add charts & graphs with the Charts app on the Airtable marketplace, you’ll need a Pro subscription to do so. As an alternative, you can use Internal’s Chart component to visualize your Airtable data in your tool. You can create dynamic pie graphs, bar charts and line graphs that update when users interact with your tool.
Instructions
- Add a Chart component to your space.
- Under “Source”, choose your Airtable base and then the function to “List [tablename] records”, where [tablename] is the table whose data you want to chart.
- Choose your chart type: bar chart, line graph, or pie chart.
- Choose the data you want displayed. Ex: Which field or grouping should serve as the x-axis or y-axis variable?
- (Optional) Add filters to make your chart dynamic. Ex: You only want to show stats for a particular user, based on a selection in a table. You can create a filter to match the user id to the user id in a user-selected row in the table. Once set up, whenever a user selects a new user in the table, your chart will update with the data for that specific user.
How to display images from Airtable attachment fields
In Airtable, you can upload images into your table within an attachment field. If you want to embed these images within your internal tool, there’s an easy way to do so using Internal’s Image component.
Tech Tip: The Airtable API structures its attachment fields as an array of objects - even when there’s only one attachment. In addition, the URL for the item uploaded is stored in a nested field called “URL”.
Let’s say your images are uploaded into an attachment field called Images. Add your Image component and then in the image URL, “Insert a variable” that will bind to the Images field in your data. This can be done without a source or with a source - refer to the Image component docs for more details.
Without a source
If you already have a component that has the Images field in its data, you can reference that component. For example, if you have a table displaying your Airtable data with the Images field, your Image URL will look something like this:
${table1.selectedRow.data.Images}
Since the URL is stored in the “url” nested field, and multiple images can be uploaded into a single record, you’ll need to alter your Image URL to reference this by adding “[0].url” to the end. The “[0]” indicates that this will be the first image uploaded, if there are more images uploaded to this record, you can increment ([1], [2], etc) to reference those additional images.
With a source
If you don’t have any components with the Images field to bind to, you can uncheck “This component does not require a source”. Then, under “Source”, specify your Airtable base and the table with the Images field. In the image URL, “Insert a variable” and then choose the name of the image component -> data -> Images, so that your Image URL looks like this:
${image1.data.Images}
If you’re using a source, you’ll also need to use filters to specify which record you want to use to populate the Images field. You’ll then alter the image URL in the same way as you would without a source, by appending “[0].url” to the end.
How to use Airtable Linked Records in your internal tool
If you have an Airtable field that links to records in a different table, Internal will automatically link those records.
Tech Tip: In its API, Airtable uses a "RECORD_ID" to uniquely identify records. Internal displays these values under a "RECORD_ID()" column. You can also expose these RECORD_ID values in your Airtable table, if you want to verify or match up records. Add a new field in Airtable, and use the "RECORD_ID()" formula to expose these values in Airtable.
Depending on whether or not you allow multiple linked records in your field, Internal will display linked records differently:
- If "Allow linking to multiple records" is OFF, Internal will automatically link the related record; clicking on that record id (Ex: "recKbB6BPmYkKpgqe") will bring you to that linked record.
- If "Allow linking to multiple records" is ON, and there are multiple records linked, Internal will display the RECORD_ID for each linked record as nested values.
If your field does not need to link to multiple records, disabling “Allow linking to multiple records” is recommended, as you’ll be able to use filters and other features more easily on that field.
Note: If you’re working with a field that must have multiple values, whether it be a multi-select field or a linked record field, you can use you can use the JSON input component to edit these values or use the Tag Selector component to submit an array of values -- this will allow you to work with these fields.
