Help

Navigate between Airtable interfaces - How to generate dynamic record pickers?

Topic Labels: Interface Designer
Solved
Jump to Solution
1115 5
cancel
Showing results for 
Search instead for 
Did you mean: 
Jeremie_Lambole
5 - Automation Enthusiast
5 - Automation Enthusiast

Hello the Airtable Community!

I’m working on a series of Airtable interfaces to handle different aspects of projects. It’s a kind of top-down structure, with interfaces drilling down into linked records e.g. clients > projects > invoices.

The typical interfaces structure looks like this:

  • Client A (Interface I)
    – Project A (Interface II)
    — Invoice A (Interface III)
  • Client B (Interface I)
    – Project B (Interface II)
    — Invoice B (Interface III)

To navigate between interfaces in the same client / project context, I’m using record pickers.

At the moment, I manually pick the relevant record with the record picker and copy the URL parameters generated by Airtable back to my Airtable base. With such hardcoded URL parameters, I can repeatedly achieve the navigation flow that I’m eventually aiming for.

Is there a way to do this “properly” dynamic, with a native Airtable function (such as RECORD_ID()) or similar? Is there an existing documentation that I missed? Is it not yet possible and somewhere in the AT roadmap?

The record picker URL parameters that I’m using are in this format: PggT2=b%3AeyIwbZpEcyI2W1swOFsicmVjeXZQeEl1ZWJYSmg1ek4iERF1dfA.
It’s made of a first part unique per table: PggT2=b%3AeyIwbZpEcyI2W1swOFsicmVj and a variable part per record: eXZQeEl1ZWJYSmg1ek4iERF1dfA. So far I didn’t find the pattern to be able to generate it at scale…

Any help would be greatly appreciated!

1 Solution

Accepted Solutions
Alan_Transon
4 - Data Explorer
4 - Data Explorer

I encountered the same issue when trying to generate buttons to navigate between pages with a similar set of filters/record pickers.
As you have seen from the URLs, filter values are encoded within the URL directly. The key here is that filters rely on base 64 encoding so that a single parameter value contains both the selected record ID and the filter type it is checked against.
You can use an online converter like this one to convert a record ID into base 64.

In my case, to make things work without having to convert manually every ID, I added an automation when a new record is created in my table which computes the base 64 record ID via a script :

function base64Encode(a, includePadding = true) {
  var c, d, e, f, g, h, i, j, o, b = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", k = 0, l = 0, m = "", n = [];
  if (!a) return a;
  do c = a.charCodeAt(k++), d = a.charCodeAt(k++), e = a.charCodeAt(k++), j = c << 16 | d << 8 | e, 
  f = 63 & j >> 18, g = 63 & j >> 12, h = 63 & j >> 6, i = 63 & j, n[l++] = b.charAt(f) + b.charAt(g) + b.charAt(h) + b.charAt(i); while (k < a.length);
  return m = n.join(""), o = a.length % 3, (o ? m.slice(0, o - 3) :m) + (includePadding ? "===".slice(o || 3) : "");
}

let inputConfig = input.config();
output.set('base64ID', base64Encode(inputConfig.recordID, false));

The script is set up to have the created record ID as an input and writes the result in its output which is used to fill a field of the corresponding record in a following action.

After that, I just wrote down the few URLs of my interfaces and replaced record IDs in both their original and base64 encoded forms.
For example, one of my buttons has a URL formula looking like:

IF({Base64 ID}, "https://airtable.com/myapphashname/pageHashName?PICKERID=" & RECORD_ID() & "&FILTERID=b%3ABCDEFGHIJ" & {Base64 ID} & "iXV1dfQ")

This works pretty well in my case without any user input required to set things up.

See Solution in Thread

5 Replies 5
Jeremie_Lambole
5 - Automation Enthusiast
5 - Automation Enthusiast

Hello Airtable!

I guess something is missing in my first post to get replies…

Is my post unclear ?
The answer obvious ? or announced on Airtable roadmap ?
Been answered before multiple times already ?

Any hint would be welcome , thanks!

Alan_Transon
4 - Data Explorer
4 - Data Explorer

I encountered the same issue when trying to generate buttons to navigate between pages with a similar set of filters/record pickers.
As you have seen from the URLs, filter values are encoded within the URL directly. The key here is that filters rely on base 64 encoding so that a single parameter value contains both the selected record ID and the filter type it is checked against.
You can use an online converter like this one to convert a record ID into base 64.

In my case, to make things work without having to convert manually every ID, I added an automation when a new record is created in my table which computes the base 64 record ID via a script :

function base64Encode(a, includePadding = true) {
  var c, d, e, f, g, h, i, j, o, b = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", k = 0, l = 0, m = "", n = [];
  if (!a) return a;
  do c = a.charCodeAt(k++), d = a.charCodeAt(k++), e = a.charCodeAt(k++), j = c << 16 | d << 8 | e, 
  f = 63 & j >> 18, g = 63 & j >> 12, h = 63 & j >> 6, i = 63 & j, n[l++] = b.charAt(f) + b.charAt(g) + b.charAt(h) + b.charAt(i); while (k < a.length);
  return m = n.join(""), o = a.length % 3, (o ? m.slice(0, o - 3) :m) + (includePadding ? "===".slice(o || 3) : "");
}

let inputConfig = input.config();
output.set('base64ID', base64Encode(inputConfig.recordID, false));

The script is set up to have the created record ID as an input and writes the result in its output which is used to fill a field of the corresponding record in a following action.

After that, I just wrote down the few URLs of my interfaces and replaced record IDs in both their original and base64 encoded forms.
For example, one of my buttons has a URL formula looking like:

IF({Base64 ID}, "https://airtable.com/myapphashname/pageHashName?PICKERID=" & RECORD_ID() & "&FILTERID=b%3ABCDEFGHIJ" & {Base64 ID} & "iXV1dfQ")

This works pretty well in my case without any user input required to set things up.

Thanks Alan, I was getting a bit desperate for a solution and missed the notification of your super detailed answer!

Let me try to implement your suggestion and confirm it works in my context.

diegodotta
4 - Data Explorer
4 - Data Explorer

@Alan_Transon, You just saved my day!!! Working here. Thanks.

AlexSanto
4 - Data Explorer
4 - Data Explorer

@Alan_TransonThanks for sharing your script - this unlocked a feature I've been trying to implement for days!