Using Scripting Block to push a webhook on button click

Development and integrations Scripting app
#1

Hey, is it possible to create some Action Buttons to push webhooks with json data with the scripting block?

#2

Yes. Hereā€™s an example that does this. It targets a web service in Google Cloud Platform, but could easily target any webhook endpoint as long as it is CORS-enabled.

//
// http post test (from GCP)
//
output.markdown('## HTTP POST Test (from GCP)');

let payload = {
    "field" : "name",
    "value" : "Bill Frenchy"
}

let postOptions = {
    method: "post",
    headers: {
        'Accept' : 'application/json',
    },
    body: JSON.stringify(payload)
}

const postResults = await fetch(gcpUrl, postOptions);
const jsonPost    = await postResults.json();

output.markdown("Display JSON Object");
output.inspect(jsonPost);
output.markdown(jsonPost.field + " = " + jsonPost.value);
5 Likes
#3

Excuse my ignorance, but how is this script triggered?
Is there an ā€œAction Buttonā€ functionality in Airtable that Iā€™m not aware of?

#4

Run button in Script Blocks.

#5

:man_facepalming:of courseā€¦ thanks!

#6

Any idea how to alter this script to work with a Zapier or Integromat webhook? Been having a go but had no luck.

Trying to get all or a select few record fields included in the payload tooā€¦

#7

Welcome to the community, @Jonny_Matthews! :smiley: Iā€™ve got this working with an Integromat webhook, though Iā€™m only passing the record ID and letting an Airtable ā€œRetrieve a recordā€ module in the scenario pull the rest of the data I need, but you could send over as much or as little as you want. Hereā€™s what Iā€™ve got, stripped down to just the basics:

let url = "https://hook.integromat.com/xxxxxxxxxxxxxxxxxxxxx?recordID=";
let table = base.getTable("Invoices");
let view = table.getView("Outstanding: Actions");

let record = await input.recordAsync("Pick a record", view);
await fetch(url + record.id);

When I click the button on an invoice record, itā€™s fed into the script, and the webhook is called with the ID included. Again, you can add more to the payload as you wish.

3 Likes
Button Suggestion: Open URL in New Tab w/o Opening
#8

@Justin_Barrett
how would I go about attaching field contents to that? Iā€™ve tried a couple of different things to no avail

#9

Without seeing precisely what youā€™re trying to do, I can suggest that ā€¦

  1. Field values needed by the webhook must be collected by the Script Block;
  2. Then passed to the webhook in some manner (either as URL parameters or as data).

#1 is achieved by adding to the script the necessary code to get the values of the record by the record ID. #2 is achieved by modifying the fetch() call with additional parameters on the URL variable.

1 Like
#10

Thanks for this Justin!

It works like a charm. When I press the button the blocks dashboard opens, is there any way to have this running in the background with seeing the blocks every time the script runs?

#11

Itā€™s not currently possible to prevent the Blocks sidebar from opening when using this method. Itā€™s a highly-requested modification, though. Several users (myself included) have asked for this in various threads. I canā€™t find a single request thread for this change, but it couldnā€™t hurt to write to Airtable support directly and let them know.

#12

Well, I believe you could eliminate the button and use a script action (see beta offering) to invoke the script silently. A few caveatsā€¦

  1. The script block would need to be converted to a script action. There may be aspects of your script block that would rule this idea out.
  2. The trigger for this would require that the record flow into a view and then be removed from that view upon completion of the script process.
1 Like
#14

Great! but im having an issue, how do i use a variable inside the payload ?

thanks in advance

#15

There have been significant updates to Airtableā€™s automation system since the earlier part of our conversation. Could you share more details about what youā€™re trying to achieve? We can give you more accurate guidance that way.

#16

I tried this script and work fine with a string value, but i want that everytime I click on the button I could get all the info from a specific row (id)

let url = ā€œURL_ENDPOINTā€;
let table = base.getTable(ā€œSorteoā€);
let view = table.getView(ā€œvistaā€);
let record = await input.recordAsync(ā€œPick a recordā€, view);

let payload = {
ā€œset_variablesā€:ā€œrecordā€,
ā€œset_variables_valuesā€: ā€œi need here the value of a recordā€,
}

let postOptions = {
method: ā€œpostā€,
headers: {
ā€˜Acceptā€™ : ā€˜application/jsonā€™,
},
body: JSON.stringify(payload)
}
const postResults = await fetch(url, postOptions);
const jsonPost = postResults.json();
let id = (jsonPost.field + " = " + jsonPost.value);

#17

Youā€™ll need to add lines to your script to get those values, then insert them into the payload variable. Each fieldā€™s value must be collected separately using either the getCellValue or getCellValueAsString methods. For example, if you have a {First Name} field, the line to collect its value would look like this:

let firstName = record.getCellValue("First Name")

How you add the collected field values to your payload object will depend on the JSON structure required by the API youā€™re calling.