Can I directly bind form elements to my data?

Ask us anything
1

Hi there,

First post here. Absolutely loving WeWeb.

Is there a way to directly bind form elements to my data (in Airtable), so that users can edit the data with a live connection, without having to submit a form?

All the best,

2

Itā€™s sadly impossible with Airtable, as Airtable has pretty strong rate limits.

To ā€œfakeā€ it, you could use the Airtable data as the init value for your form inputs, and having on change workflows that will change the data in Airtable.

Keep in mind that changes are definitive (never trust users is a classic law of UX haha) and use debounce options on inputs to not overwhelm Airtableā€™s API :wink:

1 Like
3

Thanks, Quentin!

Iā€™m happy to move away from Airtable, because letting users make live updates without needing to ā€˜saveā€™ (i.e. submit) is an important part of my UI. Would another data store make this possible?

For now, itā€™s just a prototype for myself, so I followed your suggestion. I created a global workflow that updates the Airtable record with the contents of all form fields whenever one of them is updated. Itā€™s working a treat - is this a viable solution for a launch-able product, assuming a different datastore?

Thanks for the reminder on debounce!

4

For the workflow, itā€™ll work for a MVP for sure!

I suggest Xano if youā€™re used to Airtable. Itā€™s a powerful backend that is still nocode :wink:

5

Thanks, Quentin! Iā€™ve just noticed my workflow has broken. It wonā€™t update the Airtable record. Iā€™ve clicked through the error message and canā€™t figure it out. Do you know what might be the problem here?

image
image630Ɨ510 48.3 KB

6

Can you check in the response object to see what was the error message returned by Airtable?

7

Certainly. Thanks for your help. Itā€™s this:

response

data: "

Cannot PATCH /designs/f8385601-12dd-46b8-a753-73e6f8d52b5b/cms_data_sets/cb5793ed-13a1-45d8-a2ce-3dc82c059e4d/airtable/record/

"

status: 404

statusText: ""

Iā€™m using the ā€˜Update Recordā€™ action.

8

OK, the action of pasting that made me realize the 404 was happening because the action isnā€™t passing the record ID. Iā€™ll try to figure out why and post again if Iā€™m still stuck.

1 Like
9

No worries, gonna test and learn :muscle:

10

Hey Quentin,

That solved the 404 - thanks for prompting me!

I now have the input elements updating Airtable on change, but Iā€™m struggling to populate them with an initial value.

My setup is a ā€˜dashboardā€™ page which lists all the records in a datagrid. Thereā€™s a button in the datagrid that loads the record ID into a variable then changes the page to an ā€˜edit recordā€™ page.

I want to populate all the input elements with the existing data from Airtable. For example, the ā€˜clientā€™ short answer element should have the clientā€™s name in it.

How should I pull the existing data in there? Iā€™ve tried enclosing the whole page in a div, which I bound to the relevant record, using the record ID variable. That allows me to use existing data as Init Value, but prevents me from using the input element in the On Change action.

Iā€™m guessing the answer might be an array formula?

11

Alright. Iā€™ve made it work with a version of this formula in each init value:

getKeyValue(lookup(variables['Record ID'],collections['Airtable table']),'Airtable field name')

Is this the best approach? Is there a way to do it without creating a different formula for every input element?

12

I think what might be easier would be to store the whole Airtable line in a variable as an object in WeWeb, then binding the form inputs to the proper keys in this variable.

Iā€™ve done this small video example, hopefully itā€™ll help: Loom | Free Screen & Video Recording Software | Loom

13

Thanks, Quentin. That worked for me.

1 Like
14

Glad it helped!