Display Webpage from URL field of currently selected record in Dashboard Extension

tolu619 · ‎May 09, 2024

Hello. I have used the script extension to get the URL stored in the URL field of the currently selected record. I am using the button field to send the URL to the script but ideally, I would want to just click on a record and the extension identifies the currently selected record. However, when I try to output the URL from the record in an iFrame, I simply get the HTML code for the iFrame in my output. How can I display the actual website? I know it is possible because the "URL Preview" extension built by Airtable is able to display some webpages.

Here's a screenshot of what my output looks like:

And here is my code:

let MyTable = base.getTable("Shopping List");
let field = MyTable.getField('URL');

// When run from a button field, the script skips the prompt
// and automatically uses the button's record.
let Record = await input.recordAsync('Choose a record', MyTable);
// @TS-ignore
let Link = Record.getCellValue(field);
// Display the iframe in the scripting extension output

var HTMLCode = '<!DOCTYPE html><html><head><title>Display Website in Iframe</title></head><body><iframe width="560" height="315" src="${Link}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></body></html>';
output.markdown(HTMLCode);

Alexey_Gusev · ‎May 10, 2024

Several extensions (with URL preview) are available to create your own modified version.
You can see source code in https://github.com/Airtable/apps-url-preview
It uses React and it is not very helpful in your case.
As @TheTimeSavingCo said, It uses function, available only for Custom Extensions.
In Scripting Extensions, you can get only the active table and active view id.

If you have time and inspiration, you can follow docs to make your Custom Extension.
Even if you don't know React and know a little of JS, it's just a matter of how many attempts you do (and of course you have to often save latest working version). This way, Airtable is a very good sandbox to practice scripting - you don't need to learn and install too much stuff to start with basics.

See Solution in Thread

TheTimeSavingCo · ‎May 09, 2024

There's a distinction between the Script Extension that you're using and the Custom Extension (or Blocks) that the "URL Preview' extension is built with

Specifically, here are the Scripting API docs that apply to the Script Extension and to scripts run within automations:
https://airtable.com/developers/scripting

And here are the API docs that apply to the Blocks SDK the URL Preview is built with: https://airtable.com/developers/extensions

I don't think you can render HTML via the Script Extension I'm afraid

Adam, Consultant @ The Time Saving Co

Alexey_Gusev · ‎May 10, 2024

Several extensions (with URL preview) are available to create your own modified version.
You can see source code in https://github.com/Airtable/apps-url-preview
It uses React and it is not very helpful in your case.
As @TheTimeSavingCo said, It uses function, available only for Custom Extensions.
In Scripting Extensions, you can get only the active table and active view id.

If you have time and inspiration, you can follow docs to make your Custom Extension.
Even if you don't know React and know a little of JS, it's just a matter of how many attempts you do (and of course you have to often save latest working version). This way, Airtable is a very good sandbox to practice scripting - you don't need to learn and install too much stuff to start with basics.

tolu619 · ‎May 11, 2024

Thanks for the feedback guys. I used to be a programmer so I can handle Airtable scripting, but I never learned React and now that I no longer actively code, I'm not willing to put in the time I know it would require to make my own custom extension. I'll just let this particular functionality for my base go. Thanks!