Unable to send form submission data to Integromat via a webhook

Hi all,

I’m new to javascript/airtable scripting and I’m trying to add the content of a form to a webhook when it is submitted. (Check in date, Check out date and Number of Adults)

At the moment I have an automation to trigger when a form is submitted with the action of running a script.

This is the script:

let table = base.getTable("Managed Service");
let view = table.getView("Check Availability");

let url = "https://hook.integromat.com/[hidden]?";
let checkInDate = table.getField("Check in date");
let checkOutDate = table.getField("Check out date");
let adultsNumber = table.getField("Number of Adults");

await fetch(url + "&checkInDate=" + checkInDate + "&checkOutDate=" + checkOutDate + "&adultsNumber=" + adultsNumber);
console.log(url + "&checkInDate=" + checkInDate + "&checkOutDate=" + checkOutDate + "&adultsNumber=" + adultsNumber);

When the script runs I get the webhook pushing to integromat, however the variables just show [object Object] as seen here:

Console log:

https://hook.integromat.com/[hidden]?&checkInDate=[object Object]&checkOutDate=[object Object]&adultsNumber=[object Object]

Integromat:

[
    {
        "checkInDate": "[object Object]",
        "checkOutDate": "[object Object]",
        "adultsNumber": "[object Object]"
    }
]

I need this values to be specifically what was submitted in the form.

Any help would be greatly appreciated :slight_smile:

Welcome to the community, @Felix! :smiley: There are several problems that I see with your script.

First off, there isn’t anything in the script that operates on a specific record. You get the table and view, but not a record from which to pull the data. This is typically done by passing the record ID from the trigger step. To the left of the script editing space of a “Run script” action you’ll see an area where you can add one or more input variables. Add one named recordId, and set its value to the record ID of the record from the triggering step.

With that set, you can retrieve the record from your table using something like this:

// Insert your table variable definition before the following lines
const {recordId} = input.config();
const record = await table.selectRecordAsync(recordId, {
  fields: [
    "Check in date",
    "Check out date",
    "Number of Adults"
  ]
});

That sets the recordId variable to its matching value from the script’s input configuration, and then uses that value to get an instance of that record from the table, only collecting specific field values in the process.

That leads to the second problem with your script. The getField() method does not retrieve data from the listed field. It retrieves the field itself; i.e. the field’s definition in the structure of the table. Retrieving a field value from a specific record is done using the getCellValue() method on a record instance.

Now that you have a record using the above lines, you can retrieve the values like so:

let checkInDate = record.getCellValue("Check in date");
let checkOutDate = record.getCellValue("Check out date");
let adultsNumber = record.getCellValue("Number of Adults");

(On a side note, be aware that retrieving data from a date field will give you a string representing that date, in the format YYYY-MM-DD; e.g. “2021-12-04”. Your Integromat scenario might need some help processing that date, depending on what you plan to do with it.)

The final thing to point out is that it’s best to URL-encode any data that is passed through a URL. This is done by wrapping the encodeURIComponent() function around any data added to the URL. This could be done when building the full URL, or as part of the variable assignment when retrieving the data from the cells. I’ll use the former option here.

You also could build your full URL string once, and use it for both fetching and logging:

let fullUrl = url + "checkInDate=" + encodeURIComponent(checkInDate) + "&checkOutDate=" + encodeURIComponent(checkOutDate) + "&adultsNumber=" + encodeURIComponent(adultsNumber);
await fetch(fullUrl);
console.log(fullUrl);

(Notice that I removed the & from before “checkInDate”. When passing URL parameters, the question mark is used before the first parameter name, and ampersands before each of the others. You already have a question mark as part of your root URL, so the ampersand before “checkInDate” is unnecessary.)

Finally, the line that gets the table view isn’t necessary because you’re not doing any view-specific operations in the script.

Here’s the full modified script with all of these changes:

let table = base.getTable("Managed Service");
const {recordId} = input.config();
const record = await table.selectRecordAsync(recordId, {
  fields: [
    "Check in date",
    "Check out date",
    "Number of Adults"
  ]
});

let url = "https://hook.integromat.com/[hidden]?";
let checkInDate = record.getCellValue("Check in date");
let checkOutDate = record.getCellValue("Check out date");
let adultsNumber = record.getCellValue("Number of Adults");

let fullUrl = url + "checkInDate=" + encodeURIComponent(checkInDate) + "&checkOutDate=" + encodeURIComponent(checkOutDate) + "&adultsNumber=" + encodeURIComponent(adultsNumber);
await fetch(fullUrl);
console.log(fullUrl);

1 Like

Thank you so much for the response, you’re a legend!

I’m just testing this now and it looks great. The only issue I noticed is a new record gets submitted on form submission (which makes total sense), but ideally I would want this immediately deleted after the webhook trigger.

You could add a step to your Integromat scenario to delete the created record.

That was my first idea too. I added the recordID to the webhook, but it wasn’t coming through to integromat (despite the webhook looking correct in console), checking today though it seems to have updated/is working.

1 Like