How to set up a webhook to trigger on specific field changes

Webhooks allow us to automate tasks and get real-time notifications when certain actions happen in our Baserow tables.

In this tutorial, we’ll walk you through setting up a webhook that triggers when a specific field in your Baserow table is updated and sends the updated information to an external app.

So, why would we want this webhook in the first place? Imagine you have a table tracking project statuses. When a task goes from “Pending” to “Completed,” you might want something else to happen automatically – maybe a notification gets sent out, or a task gets created in another tool. That’s where the webhook comes in, by letting external tools know when something important happens in your Baserow table.

What we’ll do

We’ll cover how to configure a webhook in Baserow that triggers when a specific field is updated, such as when a dropdown value changes, and send that data to webhook.site so we can inspect the incoming webhook data.

This can help streamline your workflows by automatically triggering notifications or further integrations.

Let’s dive in step-by-step.

Set up conditional webhooks to trigger when certain conditions are met

Step 1: Set up your Baserow table

Let’s get started with a Baserow table. If you haven’t already, create a new table in a database. We’ll call it “Tasks” for now.

Next, ensure your table has a “Status” single select field. You can add options like “Pending,” “In Progress,” and “Completed” to this field.

Use the Kanban View to see at a glance whether a task is waiting to be started, currently in progress, or already finished. This will give a better idea of how everything works and help visualize the process.

Now, let’s add a few rows representing different tasks. For example, you could add “Write a blog post,” “Finish the presentation,” or “Meet with the client.” Set their initial statuses to “Pending” or “In Progress” to reflect their current state.

Step 2: Create a webhook.site endpoint

Next up is creating a place for the Baserow webhook to send its data. Here’s where webhook.site comes in — to capture and inspect webhook requests.

Head over to webhook.site. As soon as the page loads, you’ll see a unique URL. This URL will catch any incoming webhook data.

Copy this URL. We’ll use it in the next step when setting up our webhook in Baserow.

Step 3: Configure a webhook in Baserow

Now that we have our webhook.site URL, let’s set up the webhook in Baserow.

Navigate to your Tasks table in Baserow where the tasks and the “Status” field are located.

To create a new webhook, click on the three dots (•••) next to the table name or view. Select Webhooks from the dropdown menu. Click on the button that says Create Webhook +.

Give your webhook a name, like “Task Status Update”.

In the Webhook URL field, paste the unique URL you copied from webhook.site. Choose the POST method from the list of HTTP methods.

Now, let’s select events to trigger the webhook. Scroll down to the Events section.

• Choose Rows are updated. This option allows us to set up triggers based on specific field changes.
• In the Conditions area, select the “Status” field.

If your receiving endpoint requires headers, such as an API key, you can add them here. For webhook.site, no additional headers are needed.

Step 4: Test the Webhook

Before saving, click on the Trigger Test Webhook button. This will send a test request to webhook.site to make sure everything works.

Head back to webhook.site and check if you received a test request.

Step 5: Activating the Webhook

Now that we’ve confirmed everything is working, click the Save button in Baserow to activate your webhook. This tells Baserow to start paying attention to changes in your table and trigger the webhook whenever those changes happen.

Go back to your Baserow table and find a row. Let’s say you want to trigger the webhook by marking a project as “Completed.” Change the status from “Pending” to “Completed” (or whichever condition you set in Step 3).

You can also paste a single value into multiple cells.

Now, switch back over to webhook.site, and you should see a new POST request with the data from the updated row. This is the webhook firing off, carrying the data from the updated row. You can even see details like which row was changed and its new status.

Step 6: Analyze the webhook payload

The webhook payload provides valuable information about the changes that occurred in the table. Let’s break down the data that Baserow sends:

• event_type: “rows.updated” - This confirms that the event is related to a row update.
• items: An array containing the updated row data.
• old_items: An array containing the previous state of the updated row.

Each row object within the items and old_items arrays provides details about the specific row that was updated. This includes:

• id: The unique identifier of the row.
• order: The row’s position within the table.
• Task Name: The name of the task.
• Assignee: Information about the person assigned to the task.
• Project: The project associated with the task.
• Assigned to: A list of users assigned to the task.
• Priority Level: The priority level of the task.
• Status: The current status of the task, including its ID, value, and color.

By comparing the items and old_items arrays, we can identify the specific changes that triggered the webhook event. In this case, the Status field has been updated from “Pending” to “Completed.”

{
  "table_id": 200000,
  "database_id": 80000,
  "workspace_id": 30000,
  "event_id": "047ca776-89c0-4bcb-afa2",
  "event_type": "rows.updated",
  "items": [
    {
      "id": 8,
      "order": "3.00000000000000000000",
      "Task Name": "Frontend Development",
      "Assignee": [
        {
          "id": 102,
          "value": "Sydney Mattos"
        }
      ],
      "Project": [
        {
          "id": 36,
          "value": "Web Development Project"
        }
      ],
      "Assigned to": [],
      "Priority Level": [
        {
          "id": 102,
          "value": "Low"
        }
      ],
      "Status": {
        "id": 2137380,
        "value": "Completed",
        "color": "light-yellow"
      }
    }
  ],
  "old_items": [
    {
      "id": 8,
      "order": "3.00000000000000000000",
      "Task Name": "Frontend Development",
      "Assignee": [
        {
          "id": 102,
          "value": "Sydney Mattos"
        }
      ],
      "Project": [
        {
          "id": 36,
          "value": "Web Development Project"
        }
      ],
      "Assigned to": [],
      "Priority Level": [
        {
          "id": 102,
          "value": "Low"
        }
      ],
      "Status": {
        "id": 2137378,
        "value": "Pending",
        "color": "dark-brown"
      }
    }
  ]
}

This data can now be used for various integrations, whether you’re updating other systems, notifying users, or triggering other automation tools like Zapier or Make.

Conclusion

By following these steps, we’ve successfully set up a webhook in Baserow that triggers when the “Status” field of a task is updated.

Using webhook.site, we were able to capture and inspect the webhook payload, ensuring everything is working as expected. However, you can also integrate Baserow with other tools like Make or n8n to trigger automation workflows based on webhook data, or Slack or email notifications to notify your team when task statuses change.

This enables us to create real-time, automated workflows without writing a single line of code. Feel free to explore more use cases, such as tracking when new rows are added or deleted, or when views are updated, to automate other aspects of your data management processes.