Help

Save the date! Join us on October 16 for our Product Ops launch event. Register here.

Re: How to guide: Update an Airtable record via a button field with a Make webhook

798 0
cancel
Showing results for 
Search instead for 
Did you mean: 
TheTimeSavingCo
18 - Pluto
18 - Pluto

Here's a quick guide on how to use a Make Webhook to trigger updates in Airtable!  Here's a link to the base where it's set up, and I've also included the JSON for the scenario at the end of this post in case anyone would like to just import the scenario directly into their Make account instead!

One thing to keep in mind with this method is that it will open a new tab for the user, so it's important to close these tabs once they've been used. I've seen a rare case where webhook tabs opened on an iPad weren't closed right away. A week later, closing these tabs refreshed the page and unexpectedly triggered the webhooks again; that was...interesting to troubleshoot

Creating the Webhook moduleCreating the Webhook module
Clicking "Copy URL" so that I can set up the button in AirtableClicking "Copy URL" so that I can set up the button in Airtable

Creating the button in AirtableCreating the button in Airtable

Here we append the webhook URL with "?record_id=" to indicate that we're passing a value named "record_id" to Make, allowing us to use it in the Make Scenario:

 

 

https://hook.us1.make.com/38jqh9w2gh123ava12y44hfp37o9c1m?record_id=" & RECORD_ID()

 

 

The button fieldThe button field

After this, we click the button to load up the URL once so that Make can determine the data structure of the URL params, and the page looks like this:

Screenshot 2024-08-09 at 5.12.38 PM.png
Note that this is what your users will also see when they click the button to trigger it, so some user education might be needed so they don't get confused!

And once that's done, the module updates to show that the data structure was successfully determined (note the green text):

Determing the data structureDeterming the data structure

We can now move on to creating the "Update Record" module

Creating the moduleCreating the module

Creating the Airtable connectionCreating the Airtable connection

Selecting OAuthSelecting OAuth

Granting permissions for the base we want to updateGranting permissions for the base we want to update
Selecting the "record_id" value from the URL parametersSelecting the "record_id" value from the URL parameters

And here's the end result!
Screenshot 2024-08-09 at 4.44.06 PM.png

Feel free to reply if anything's confusing and I'll try my best to help!

===
To import a Make scenario, save the following code below in a file called "blueprint.json" or something, and then import it into your scenario like so!

Screenshot 2024-08-09 at 5.17.15 PM.png
JSON:

 

 

 

{
    "name": "Tutorial: Trigger Make webhook via button",
    "flow": [
        {
            "id": 3,
            "module": "gateway:CustomWebHook",
            "version": 1,
            "parameters": {
                "hook": 1532564,
                "maxResults": 1
            },
            "mapper": {},
            "metadata": {
                "designer": {
                    "x": 0,
                    "y": 0
                },
                "restore": {
                    "parameters": {
                        "hook": {
                            "data": {
                                "editable": "true"
                            },
                            "label": "Airtable button trigger"
                        }
                    }
                },
                "parameters": [
                    {
                        "name": "hook",
                        "type": "hook:gateway-webhook",
                        "label": "Webhook",
                        "required": true
                    },
                    {
                        "name": "maxResults",
                        "type": "number",
                        "label": "Maximum number of results"
                    }
                ],
                "interface": [
                    {
                        "name": "record_id",
                        "type": "text"
                    }
                ]
            }
        },
        {
            "id": 5,
            "module": "airtable:ActionUpdateRecords",
            "version": 3,
            "parameters": {
                "__IMTCONN__": 2756877
            },
            "mapper": {
                "id": "{{3.record_id}}",
                "base": "apphaUv6z4AgqTqzD",
                "table": "tblEGQ2Knu09hEQhc",
                "record": {
                    "fldNv6MVmHKInsoaa": "Done"
                },
                "typecast": false,
                "useColumnId": false
            },
            "metadata": {
                "designer": {
                    "x": 300,
                    "y": 0
                },
                "restore": {
                    "expect": {
                        "base": {
                            "label": "Trigger Make webhook via button"
                        },
                        "table": {
                            "label": "Table 1"
                        },
                        "record": {
                            "nested": {
                                "fldNv6MVmHKInsoaa": {
                                    "mode": "chose",
                                    "label": "Done"
                                }
                            }
                        },
                        "typecast": {
                            "mode": "chose"
                        },
                        "useColumnId": {
                            "mode": "chose"
                        }
                    },
                    "parameters": {
                        "__IMTCONN__": {
                            "data": {
                                "scoped": "true",
                                "connection": "airtable3"
                            },
                            "label": "My Airtable OAuth connection"
                        }
                    }
                },
                "parameters": [
                    {
                        "name": "__IMTCONN__",
                        "type": "account:airtable3,airtable2",
                        "label": "Connection",
                        "required": true
                    }
                ],
                "expect": [
                    {
                        "name": "base",
                        "type": "select",
                        "label": "Base",
                        "required": true
                    },
                    {
                        "name": "typecast",
                        "type": "boolean",
                        "label": "Smart links",
                        "required": true
                    },
                    {
                        "name": "useColumnId",
                        "type": "boolean",
                        "label": "Use Column ID",
                        "required": true
                    },
                    {
                        "name": "table",
                        "type": "select",
                        "label": "Table",
                        "required": true
                    },
                    {
                        "name": "id",
                        "type": "text",
                        "label": "Record ID",
                        "required": true
                    },
                    {
                        "name": "record",
                        "spec": [
                            {
                                "name": "fld5YFxV8pUgLPWBQ",
                                "type": "text",
                                "label": "Name"
                            },
                            {
                                "mode": "edit",
                                "name": "fldNv6MVmHKInsoaa",
                                "type": "select",
                                "label": "Status"
                            }
                        ],
                        "type": "collection",
                        "label": "Record"
                    }
                ],
                "interface": [
                    {
                        "name": "id",
                        "type": "text",
                        "label": "ID"
                    },
                    {
                        "name": "createdTime",
                        "type": "date",
                        "label": "Created Time"
                    },
                    {
                        "name": "Name",
                        "type": "text",
                        "label": "Name"
                    },
                    {
                        "name": "Status",
                        "type": "text",
                        "label": "Status"
                    },
                    {
                        "name": "Update Status",
                        "spec": [
                            {
                                "name": "label",
                                "type": "text",
                                "label": "Label"
                            },
                            {
                                "name": "url",
                                "type": "url",
                                "label": "URL"
                            }
                        ],
                        "type": "collection",
                        "label": "Update Status"
                    }
                ]
            }
        }
    ],
    "metadata": {
        "instant": true,
        "version": 1,
        "scenario": {
            "roundtrips": 1,
            "maxErrors": 3,
            "autoCommit": true,
            "autoCommitTriggerLast": true,
            "sequential": false,
            "slots": null,
            "confidential": false,
            "dataloss": false,
            "dlq": false,
            "freshVariables": false
        },
        "designer": {
            "orphans": []
        },
        "zone": "eu1.make.com"
    }
}

 

 

6 Replies 6
Pello
6 - Interface Innovator
6 - Interface Innovator

Thanks for sharing this, Adam!

I've been experimenting with this idea myself, as it could really cut down on the number of automations we currently use to trigger webhooks via the scripting module. However, the UX isn’t ideal with that black window popping up.

It would be fantastic if Airtable could add a "Launch Webhook" action directly to buttons (both in the base and interface) that launches the webhook without any new windows popping up. That would be a game-changer! What do you think?

Pello

PedroCerrano
6 - Interface Innovator
6 - Interface Innovator

This is outstanding, Adam!!! Thanks for the incredible detail!

Agree Pello. The UX is a bummer.

I wonder if there's a way around this or to write a script in Make that would automatically close the window. No window pop-up is ideal!

🤔

PedroCerrano
6 - Interface Innovator
6 - Interface Innovator

Got it working. I chose to use the Personal Access Token. Make was giving me grief trying to use OAuth.

Again, excellent solution!

There is a work around actually, by using Airtable Automations. Just trigger the Airtable Automation and Run this script

let config = input.config();
let url = `https://hook.eu1.make.com/xxxxx?myRecord=${config.myRecord}`;
fetch(url);

You can send the RecordID with the webhook to further use the Airtable record in your Make.com script

I like where your head is, but I'm not sure how to trigger an automation from a shared view. This setup uses a button field.

I see where I can configure a button in an Interface, but that creates a different challenge. Seems I need the enduser to have an Airtable seat to be able to see the custom Interface buttons.