I was using Airtable in a POC to pitch to my colleagues when I realised that while powerful, self-related tables are difficult to navigate and update. Especially if similar names are used at various different places in the tree. It is not possible to know a records exact place in the tree by looking at it in grid view.

What it does

Hierarchy presents a self related table as a drill-down list of siblings - you only ever see records that has the same parent. It provides a trace route of breadcrumbs links to all the branches the user clicked on. At any level you can quickly add a new child to a parent, knowing it is in the correct spot - no guessing. There is also pruning and grafting capabilities, that helps to make sure that your self-related table's data is clean and accurate.

How I built it

I did the tutorial and then dove straight in. I wanted to build it with just basic javascript with the Airtable api so that it is fast.

Challenges I ran into

I am not that familiar with JavaScript and React so getting the finicky syntax of colons, braces etc was a challenge. Also figuring out what in the code is causing an error is not always obvious or intuitive.

Accomplishments that I'm proud of

I think the whole block is quite an accomplishment, from navigation, to building the breadcrumbs, adding new records and pruning and grafting.

What I learned

To be patient with JavaScript.

What's next for Hierarchy

On the GitHub page I have a roadmap of where I think Hierarchy can go. Linked record lists, Customised display card, Roll-up values and Branch templates, to name a few.

Built With

Share this project: