This example app shows how to intetgrate a charting library (Chart.Js) with Airtable blocks. The code shows:
- How to use the Chart.js external library.
- How to store app-related data using
globalConfig
andSynced
UI components. - How to use Standard UI components for custom behavior.
- How to implement custom hook wrappers around logically grouped Airtable features.
The application lets a user view a simple bar chart or a stacked chart based on a "grouping" select input.
The application relevant code lives in two directories:
/config
: All globally defined store keys and constants.
/frontend
: The React code that runs our application interface.
First, ensure you have the Airtable CLI installed.
-
Setup Create a new base with at least two columns of data with a many-to-one cardinality, i.e. one
Pet Owner
has manyPets
.The data in this screenshot is as follows:
N Person Pet type 1 Alice Cat 2 Bob Dog 3 Alice Hamster 4 Bob Hamster 5 Alice Dog -
Get the code and install Dependencies
Clone this repository to a location on your computer. Install dependencies from the root of your application with eithernpm install
oryarn
if you prefer. -
Get App ID and Block ID
From your base, click "add new App", when provided theinit
script, copy the app id and block id. In the video below, this appears as the string valueappd9dkdYZyub62Hy/blkWKm2JYQM2l769Z
. -
Update Code reference
In your code editor, update the config in.block/remote.json
with the appropriate values. -
Run the block locally
From the root of your new app, runblock run
. Note the provided server where your app is located. Typicallyhttps://localhost:9000
. Note, you may need to set a Chrome configuration to allow accessing https of unverified or expired urls - localhost in our case. -
Provide running block endpoint to Airtable
Return to the browser and provide the URL of the running block.
View the following gif for a visual walk-through.