Skip to main content
Solved

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

J
Forum|alt.badge.img+4

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!

Best answer by Alan_Transon

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.

View original
JonathanBowen
T
M
5 people like this
  • JonathanBowen
    JonathanBowen
  • T
    Tom_Keysers
  • M
    Mariusz_S
  • U
    UCanTrade
  • joseph_appsmith
    joseph_appsmith
Did this topic help you find an answer to your question?

6 replies

J
Forum|alt.badge.img+4

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!

V
1 person likes this
  • V
    Vykintas_Gloden
A
Forum|alt.badge.img+1
  • Alan_Transon
  • New Participant
  • 1 reply
  • Answer
  • October 31, 2022

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.

J
J
D
7 people like this
  • J
    Jeremie_Lambole
  • J
    Jeff_Haskin
  • D
    diegodotta
  • A
    AlexSanto
  • D
    Dayd
  • H
    hannahRFP
  • E
    EaZyGreen
J
Forum|alt.badge.img+4
  • Jeremie_Lambole
  • Author
  • New Participant
  • 4 replies
  • November 26, 2022
Alan_Transon wrote:

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.

D
Forum|alt.badge.img+1
  • diegodotta
  • New Participant
  • 1 reply
  • April 8, 2023

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

A
Forum|alt.badge.img+1
  • AlexSanto
  • New Participant
  • 1 reply
  • May 23, 2023

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

D
Forum|alt.badge.img+2
  • Dayd
  • New Participant
  • 1 reply
  • August 3, 2023
Alan_Transon wrote:

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 a lot Alan!

Works well for single criteria!

Any idea how to create a url for more complex cases with interface. In particular filters with numerous fields present to some values?

Any idea how this could apply to the "new" List view with drop downs?  Even with a single Filed the base 64 id does not appear in the URL

Not sure how all this url magic works.

Any documentation somewhere?

Thanks for your support!

 

Reply


Most helpful members this week

Terms & Conditions