UI (Scripting Block)

[Olpy_Acaflo]

Hi,

Airtable Scripting Block Documentation wrote:
" In your script, you can use anything from the JavaScript standard library, except for DOM APIs that interact with HTML on the page."

Suggestion:
In place of DOM API that is not the right way to do it,
could you open any other way you should prefer like
passing States to Props to UI Components ?

Best,

oLπ

[Stephen_Suen]

At this time, the scripting block does not allow you to manipulate the DOM. You can use our input and output APIs to create simple UIs and render Markdown to the block.

[Olpy_Acaflo]

Hi Stephen,
Many Thanks for replying.
I read you with attention but what you wrote is exactly why I suggested to open some AirTable-made React UI-Component that we could use by passing States to its Props to get more rich UI for our own scripts without manipulating DOM via DOM APIs that’s obviously not compliant with AT UI.
Best,
olπ

[Kasra]

Thanks for the feedback! Can you share more about what kind of UIs you’d like to be able to build?

[Olpy_Acaflo]

Thanks for your reply !
I certainly will share one mockup or another as soon as possible
(I’m scripting near my main job but scripting isn’t my main job)
Best,
olπ

[Bill_French]

Olpy_Acaflo:

passing States to Props to UI Components ?

Stephen_Suen:

You can use our input and output APIs to create simple UIs and render Markdown to the block.

I’ll take a stab at what @Olpy_Acaflon may be intimating. If I’ve misjudged @Olpy_Acaflo’s intent, I have simply shared another related but equally important shortcoming. :winking_face:

The Script Block has definitive ways to surface UI components that are neither native HTML nor traditional DOM methodologies. This makes sense [actually] given the need to sanitize code running on joint-tenant SaaS services.

The constraint, however, is that there’s no way to set a default value for a UI component such as input.textAsync (i.e., defTable passed here as a default value parameter isn’t supported it seems):

// select the table
let defTable = "Sales Transactions";
let srcTable = await input.textAsync('Enter the table name:', defTable);

This may come as a surprise to many developers since it’s a common expectation that any type of input operation also accompanies ways to visibly establish default values for users. Streamlit (the data science platform) for example addresses this requirement quite elegantly.