多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

359 lines
9.5 KiB

---
title: 'Create webhook'
description: 'Learn how to create a webhook in NocoDB.'
tags: ['Webhook', 'Create']
keywords: ['NocoDB webhook', 'create webhook']
---
## Create Webhook
### Accessing webhook page
1. Click on table for which webhook needs to be configured on the left sidebar
2. Open `Details` tab in topbar,
3. Click on `Webhooks` tab
4. Click `Add New Webhook`
![Accessing webhook](/img/v2/webhook/create-webhook-1.png)
### Configuring webhook
1. Name of the webhook
feat: button field (#9144) * feat: static button type * fix: swagger * fix: style corrections * feat: webhook trigger * fix: disables * feat: Button icons fix: row Delete failing * fix: expanded-form ux fix: disable buttons in forms fix: update PlainCell button handling fix: webhook delete, active change handling * fix: disable case * fix: disable case * fix: update Button styles * fix: refactor min/max with limit for columns fix: disable filter, groupby for Button Field fix: disable aggregation for Buttons * fix: hide button field in Filters * fix: fields menu corrections fix: update menu corrections * fix: rebase * feat: support webhook creation from ButtonOptions * fix: sort related tests * fix: keep webhook modal open * fix: ui fixes * fix: icon duplicate * fix: syntax highlighing for handlebar fix: disable mascot fix: truncate selected webhook * fix: sort disable tooltip * test: button playwright test * fix: button column duplication * fix: add error fix: column options * fix: EditOrAddProvider.vue * fix: add invalid configuration * fix: ux corrections * fix: ux corrections * fix: error handling fix: clear single query cache on hook delete * fix: include button type in api * fix: update overlay styles fix: webhook update * fix: formula placeholder * fix: playwright tests * fix: playwright tests * feat: refactor formula input * fix: added more spacing * fix: no icon text * fix: lint * fix: handle invalid url * fix: handle sort by for button causes issue when button used as lookup * fix: button field position * docs: button field * fix: tooltip correction * fix: link * fix: add btn href * fix: handle some edge cases * fix: handle some edge cases * fix: update font color * fix: add manual trigger docs * fix: sqlite BaseModel fix * docs: button share view info * fix: rebase * fix: reduce height and added resize support fix: added tooltip if label overflow * fix: manual hook disable state * docs: manual trigger details in webhook page * fix: chevron grey shade to 500 * docs: sample payload for manual trigger * fix: style update * fix: pr review comments * fix: pr review changes * fix: reactivity issue * fix: reactivity issue * fix: filter enabled on button * fix: reload meta on webhook change * fix: error handling in formula filter * fix: handle url error --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
4 months ago
2. Select the event for which webhook needs to be triggered
feat: button field (#9144) * feat: static button type * fix: swagger * fix: style corrections * feat: webhook trigger * fix: disables * feat: Button icons fix: row Delete failing * fix: expanded-form ux fix: disable buttons in forms fix: update PlainCell button handling fix: webhook delete, active change handling * fix: disable case * fix: disable case * fix: update Button styles * fix: refactor min/max with limit for columns fix: disable filter, groupby for Button Field fix: disable aggregation for Buttons * fix: hide button field in Filters * fix: fields menu corrections fix: update menu corrections * fix: rebase * feat: support webhook creation from ButtonOptions * fix: sort related tests * fix: keep webhook modal open * fix: ui fixes * fix: icon duplicate * fix: syntax highlighing for handlebar fix: disable mascot fix: truncate selected webhook * fix: sort disable tooltip * test: button playwright test * fix: button column duplication * fix: add error fix: column options * fix: EditOrAddProvider.vue * fix: add invalid configuration * fix: ux corrections * fix: ux corrections * fix: error handling fix: clear single query cache on hook delete * fix: include button type in api * fix: update overlay styles fix: webhook update * fix: formula placeholder * fix: playwright tests * fix: playwright tests * feat: refactor formula input * fix: added more spacing * fix: no icon text * fix: lint * fix: handle invalid url * fix: handle sort by for button causes issue when button used as lookup * fix: button field position * docs: button field * fix: tooltip correction * fix: link * fix: add btn href * fix: handle some edge cases * fix: handle some edge cases * fix: update font color * fix: add manual trigger docs * fix: sqlite BaseModel fix * docs: button share view info * fix: rebase * fix: reduce height and added resize support fix: added tooltip if label overflow * fix: manual hook disable state * docs: manual trigger details in webhook page * fix: chevron grey shade to 500 * docs: sample payload for manual trigger * fix: style update * fix: pr review comments * fix: pr review changes * fix: reactivity issue * fix: reactivity issue * fix: filter enabled on button * fix: reload meta on webhook change * fix: error handling in formula filter * fix: handle url error --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
4 months ago
| Trigger | Details |
|------------------------------|---------------------------------------------|
| After Record Insert | After a single record is inserted |
| After Record Update | After a single record is updated |
| After Record Delete | After a single record is deleted |
| After Multiple Record Insert | After bulk records are inserted |
| After Multiple Record Update | After bulk records are updated |
| After Multiple Record Delete | After bulk records are deleted |
| Manual Trigger | Manually trigger webhook using button field |
3. Method & URL: Configure the endpoint to which webhook needs to be triggered. Supported methods are GET, POST, DELETE, PUT, HEAD, PATCH
4. Headers & Parameters: Configure Request headers & parameters (optional)
5. Condition: Only records meeting the configured criteria will trigger webhook (optional)
6. Test webhook (with sample payload) to verify if parameter are configured appropriately (optional)
7. Save the webhook
![Configuring webhook](/img/v2/automations/webhooks/create-webhook-2.png)
feat: button field (#9144) * feat: static button type * fix: swagger * fix: style corrections * feat: webhook trigger * fix: disables * feat: Button icons fix: row Delete failing * fix: expanded-form ux fix: disable buttons in forms fix: update PlainCell button handling fix: webhook delete, active change handling * fix: disable case * fix: disable case * fix: update Button styles * fix: refactor min/max with limit for columns fix: disable filter, groupby for Button Field fix: disable aggregation for Buttons * fix: hide button field in Filters * fix: fields menu corrections fix: update menu corrections * fix: rebase * feat: support webhook creation from ButtonOptions * fix: sort related tests * fix: keep webhook modal open * fix: ui fixes * fix: icon duplicate * fix: syntax highlighing for handlebar fix: disable mascot fix: truncate selected webhook * fix: sort disable tooltip * test: button playwright test * fix: button column duplication * fix: add error fix: column options * fix: EditOrAddProvider.vue * fix: add invalid configuration * fix: ux corrections * fix: ux corrections * fix: error handling fix: clear single query cache on hook delete * fix: include button type in api * fix: update overlay styles fix: webhook update * fix: formula placeholder * fix: playwright tests * fix: playwright tests * feat: refactor formula input * fix: added more spacing * fix: no icon text * fix: lint * fix: handle invalid url * fix: handle sort by for button causes issue when button used as lookup * fix: button field position * docs: button field * fix: tooltip correction * fix: link * fix: add btn href * fix: handle some edge cases * fix: handle some edge cases * fix: update font color * fix: add manual trigger docs * fix: sqlite BaseModel fix * docs: button share view info * fix: rebase * fix: reduce height and added resize support fix: added tooltip if label overflow * fix: manual hook disable state * docs: manual trigger details in webhook page * fix: chevron grey shade to 500 * docs: sample payload for manual trigger * fix: style update * fix: pr review comments * fix: pr review changes * fix: reactivity issue * fix: reactivity issue * fix: filter enabled on button * fix: reload meta on webhook change * fix: error handling in formula filter * fix: handle url error --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
4 months ago
For more information on **Manual Trigger** webhook & its use with **Button** field, refer [here](/fields/field-types/custom-types/button)
### Webhook with conditions
In case of webhook with conditions, only records meeting the configured criteria will trigger webhook. For example, trigger webhook only when `Status` is `Complete`. You can also configure multiple conditions using `AND` or `OR` operators. For example, trigger webhook only when `Status` is `Complete` and `Priority` is `High`.
Webhook will be triggered only when the configured condition wasn't met before the record was updated. For example, if you have configured webhook with condition `Status` `is` `Complete` and `Priority` `is` `High` and you update the record with `Status` `Complete` and `Priority` `Low` to `High`, webhook will be triggered. However, if you update any other fields of the record with `Status` `Complete` and `Priority` `High`, webhook won't be triggered.
In summary, webhook will be triggered only when `Condition(old-record) = false` and `Condition(new-record) = true`.
feat: button field (#9144) * feat: static button type * fix: swagger * fix: style corrections * feat: webhook trigger * fix: disables * feat: Button icons fix: row Delete failing * fix: expanded-form ux fix: disable buttons in forms fix: update PlainCell button handling fix: webhook delete, active change handling * fix: disable case * fix: disable case * fix: update Button styles * fix: refactor min/max with limit for columns fix: disable filter, groupby for Button Field fix: disable aggregation for Buttons * fix: hide button field in Filters * fix: fields menu corrections fix: update menu corrections * fix: rebase * feat: support webhook creation from ButtonOptions * fix: sort related tests * fix: keep webhook modal open * fix: ui fixes * fix: icon duplicate * fix: syntax highlighing for handlebar fix: disable mascot fix: truncate selected webhook * fix: sort disable tooltip * test: button playwright test * fix: button column duplication * fix: add error fix: column options * fix: EditOrAddProvider.vue * fix: add invalid configuration * fix: ux corrections * fix: ux corrections * fix: error handling fix: clear single query cache on hook delete * fix: include button type in api * fix: update overlay styles fix: webhook update * fix: formula placeholder * fix: playwright tests * fix: playwright tests * feat: refactor formula input * fix: added more spacing * fix: no icon text * fix: lint * fix: handle invalid url * fix: handle sort by for button causes issue when button used as lookup * fix: button field position * docs: button field * fix: tooltip correction * fix: link * fix: add btn href * fix: handle some edge cases * fix: handle some edge cases * fix: update font color * fix: add manual trigger docs * fix: sqlite BaseModel fix * docs: button share view info * fix: rebase * fix: reduce height and added resize support fix: added tooltip if label overflow * fix: manual hook disable state * docs: manual trigger details in webhook page * fix: chevron grey shade to 500 * docs: sample payload for manual trigger * fix: style update * fix: pr review comments * fix: pr review changes * fix: reactivity issue * fix: reactivity issue * fix: filter enabled on button * fix: reload meta on webhook change * fix: error handling in formula filter * fix: handle url error --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
4 months ago
:::note
**Note:** Conditions are not applicable for Manual Trigger webhook.
:::
### Webhook response sample
<Tabs>
<TabItem value="After Insert" label="After Insert">
```bash
{
"type": "records.after.insert",
"id": "9dac1c54-b3be-49a1-a676-af388145fa8c",
"data": {
"table_id": "md_xzru7dcqrecc60",
"table_name": "Film",
"view_id": "vw_736wrpoas7tr0c",
"view_name": "Film",
"records": [
{
"FilmId": 1011,
"Title": "FOO",
"Language": {
"LanguageId": 1,
"Name": "English"
},
}
]
}
}
```
</TabItem>
<TabItem value="After Update" label="After Update">
```bash
{
"type": "records.after.update",
"id": "6a6ebfe4-b0b5-434e-b5d6-5212adbf82fa",
"data": {
"table_id": "md_xzru7dcqrecc60",
"table_name": "Film",
"view_id": "vw_736wrpoas7tr0c",
"view_name": "Film",
"previous_records": [
{
"FilmId": 1,
"Title": "ACADEMY DINOSAUR",
"Description": "A Epic Drama of a Feminist in The Canadian Rockies",
"Actor List": [
{
"ActorId": 10,
"FirstName": "CHRISTIAN"
}
],
}
],
"records": [
{
"FilmId": 1,
"Title": "ACADEMY DINOSAUR (Edited)",
"Actor List": [
{
"ActorId": 10,
"FirstName": "CHRISTIAN"
}
],
}
]
}
}
```
</TabItem>
<TabItem value="After Delete" label="After Delete">
```bash
{
"type": "records.after.delete",
"id": "e593079f-70e5-4965-8944-5ff7aeed005c",
"data": {
"table_id": "md_xzru7dcqrecc60",
"table_name": "Film",
"view_id": "vw_736wrpoas7tr0c",
"view_name": "Film",
"records": [
{
"FilmId": 1010,
"Title": "ALL-EDITED",
"Language": {
"LanguageId": 1,
"Name": "English"
},
}
]
}
}
```
</TabItem>
<TabItem value="After Bulk Insert" label="After Bulk Insert">
```bash
{
"type": "records.after.bulkInsert",
"id": "f8397b06-a399-4a3a-b6b0-6d1c0c2f7578",
"data": {
"table_id": "md_xzru7dcqrecc60",
"table_name": "Film",
"view_id": "vw_3fq2e9q8drkblw",
"view_name": "GridView",
"records_inserted": 2
}
}
```
</TabItem>
<TabItem value="After Bulk Update" label="After Bulk Update">
```bash
{
"type": "records.after.bulkUpdate",
"id": "e983cea5-8e38-438e-96a0-048751f6830b",
"data": {
"table_id": "md_xzru7dcqrecc60",
"table_name": "Film",
"view_id": "vw_3fq2e9q8drkblw",
"view_name": "Sheet-1",
"previous_records": [
[
{
"FilmId": 1005,
"Title": "Q",
"Language": {
"LanguageId": 1,
"Name": "English"
},
},
{
"FilmId": 1004,
"Title": "P",
"Language": {
"LanguageId": 1,
"Name": "English"
}
}
]
],
"records": [
[
{
"FilmId": 1005,
"Title": "Q-EDITED",
"Language": {
"LanguageId": 1,
"Name": "English"
}
},
{
"FilmId": 1004,
"Title": "P-EDITED",
"Language": {
"LanguageId": 1,
"Name": "English"
},
}
]
]
}
}
```
</TabItem>
<TabItem value="After Bulk Delete" label="After Bulk Delete">
```bash
{
"type": "records.after.bulkDelete",
"id": "e7f1f4e5-7052-4ca2-9355-241ceb836f43",
"data": {
"table_id": "md_xzru7dcqrecc60",
"table_name": "Film",
"view_id": "vw_3fq2e9q8drkblw",
"view_name": "Sheet-1",
"records": [
[
{
"FilmId": 1022,
"Title": "x",
"Language": {
"LanguageId": 1,
"Name": "English"
},
},
{
"FilmId": 1023,
"Title": "x",
"Language": {
"LanguageId": 1,
"Name": "English"
},
}
]
]
}
}
```
feat: button field (#9144) * feat: static button type * fix: swagger * fix: style corrections * feat: webhook trigger * fix: disables * feat: Button icons fix: row Delete failing * fix: expanded-form ux fix: disable buttons in forms fix: update PlainCell button handling fix: webhook delete, active change handling * fix: disable case * fix: disable case * fix: update Button styles * fix: refactor min/max with limit for columns fix: disable filter, groupby for Button Field fix: disable aggregation for Buttons * fix: hide button field in Filters * fix: fields menu corrections fix: update menu corrections * fix: rebase * feat: support webhook creation from ButtonOptions * fix: sort related tests * fix: keep webhook modal open * fix: ui fixes * fix: icon duplicate * fix: syntax highlighing for handlebar fix: disable mascot fix: truncate selected webhook * fix: sort disable tooltip * test: button playwright test * fix: button column duplication * fix: add error fix: column options * fix: EditOrAddProvider.vue * fix: add invalid configuration * fix: ux corrections * fix: ux corrections * fix: error handling fix: clear single query cache on hook delete * fix: include button type in api * fix: update overlay styles fix: webhook update * fix: formula placeholder * fix: playwright tests * fix: playwright tests * feat: refactor formula input * fix: added more spacing * fix: no icon text * fix: lint * fix: handle invalid url * fix: handle sort by for button causes issue when button used as lookup * fix: button field position * docs: button field * fix: tooltip correction * fix: link * fix: add btn href * fix: handle some edge cases * fix: handle some edge cases * fix: update font color * fix: add manual trigger docs * fix: sqlite BaseModel fix * docs: button share view info * fix: rebase * fix: reduce height and added resize support fix: added tooltip if label overflow * fix: manual hook disable state * docs: manual trigger details in webhook page * fix: chevron grey shade to 500 * docs: sample payload for manual trigger * fix: style update * fix: pr review comments * fix: pr review changes * fix: reactivity issue * fix: reactivity issue * fix: filter enabled on button * fix: reload meta on webhook change * fix: error handling in formula filter * fix: handle url error --------- Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>
4 months ago
</TabItem>
<TabItem value="Manual Trigger" label="Manual Trigger">
```bash
{
"type": "records.manual.trigger",
"id": "551a2010-d658-4185-a050-cf3fca56a5a9",
"data": {
"table_id": "mzo4r3zrbcph43i",
"table_name": "Features",
"rows": [
{
"Id": 1,
"Title": "dstala",
"CreatedAt": "2024-08-12 11:56:15+00:00",
"UpdatedAt": "2024-08-12 11:56:48+00:00",
"Button": {
"type": "url",
"label": "Button",
"url": "https://github.com/dstala"
},
}
]
}
}
```
</TabItem>
</Tabs>
Nc feat/webhook UI (#9141) * feat: webhook wip * feat: webhook wip custom theme * fix: handle scroll * chore: clean up * fix: ux fixes * fix: font corrections * fix: webhook docs links fix: pr review comments * fix: box-shadow * fix(nc-gui): webhook css fixes * fix(nc-gui): reduce btn width from webhook modal * fix(nc-gui): update webhook page json editor * fix(nc-gui): add webhook docs link * fix(nc-gui): webhook parameter, headers input gap * fix(nc-gui): update webhook list table * fix(nc-gui): remove beautify json btn * fix(nc-gui): webhook header, parameters styles * fix(nc-gui): warning issue * fix(nc-gui): upate test webhook btn icons and enable save changes btn by default * fix(nc-gui): update hook type text in table * fix(nc-gui): focus webhook title on modal open * fix(nc-gui): minor changes * fix(nc-gui): update filter and params btn type * fix(nc-gui): update webhook oss ui * fix(nc-gui): add sortby webhook operation type option * fix(nc-gui): update webhook notification type icons * fix(nc-gui): invalid props issue * fix(nc-gui): update webhook condition text * fix(nc-gui): update monaco editor font color * test: webhook class name fix * fix(nc-gui): add missing webhook header key dropdown options * fix(nc-gui): update webhook header key placeholder text color * fix(nc-gui): update webhook modal min width * test(nc-gui): update some of the webhook related test * test(nc-gui): update create webhook test case * text(nc-gui): fixed some of the webhook test cases * test(nc-gui): update webhook conditional test cases * docs: update * fix(nc-gui): small changes --------- Co-authored-by: DarkPhoenix2704 <anbarasun123@gmail.com> Co-authored-by: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
4 months ago
### Webhook with custom payload ☁
Nc feat/webhook UI (#9141) * feat: webhook wip * feat: webhook wip custom theme * fix: handle scroll * chore: clean up * fix: ux fixes * fix: font corrections * fix: webhook docs links fix: pr review comments * fix: box-shadow * fix(nc-gui): webhook css fixes * fix(nc-gui): reduce btn width from webhook modal * fix(nc-gui): update webhook page json editor * fix(nc-gui): add webhook docs link * fix(nc-gui): webhook parameter, headers input gap * fix(nc-gui): update webhook list table * fix(nc-gui): remove beautify json btn * fix(nc-gui): webhook header, parameters styles * fix(nc-gui): warning issue * fix(nc-gui): upate test webhook btn icons and enable save changes btn by default * fix(nc-gui): update hook type text in table * fix(nc-gui): focus webhook title on modal open * fix(nc-gui): minor changes * fix(nc-gui): update filter and params btn type * fix(nc-gui): update webhook oss ui * fix(nc-gui): add sortby webhook operation type option * fix(nc-gui): update webhook notification type icons * fix(nc-gui): invalid props issue * fix(nc-gui): update webhook condition text * fix(nc-gui): update monaco editor font color * test: webhook class name fix * fix(nc-gui): add missing webhook header key dropdown options * fix(nc-gui): update webhook header key placeholder text color * fix(nc-gui): update webhook modal min width * test(nc-gui): update some of the webhook related test * test(nc-gui): update create webhook test case * text(nc-gui): fixed some of the webhook test cases * test(nc-gui): update webhook conditional test cases * docs: update * fix(nc-gui): small changes --------- Co-authored-by: DarkPhoenix2704 <anbarasun123@gmail.com> Co-authored-by: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
4 months ago
:::info
This feature is only available in the paid plans, in both cloud & self-hosted.
:::
In the enterprise edition, you can set up a personalized payload for your webhook. Just head to the `Body` tab to make the necessary configurations. Users can utilize [handlebar syntax](https://handlebarsjs.com/guide/#simple-expressions), which allows them to access and manipulate the data easily.
Use `{{ json event }}` to access the event data. Sample response is as follows
```json
{
"type": "records.after.insert",
"id": "0698517a-d83a-4e72-bf7a-75f46b704ad1",
"data": {
"table_id": "m969t01blwprpef",
"table_name": "Table-2",
"view_id": "vwib3bvfxdqgymun",
"view_name": "Table-2",
"rows": [
{
"Id": 1,
"Tags": "Sample Text",
"CreatedAt": "2024-04-11T10:40:20.998Z",
"UpdatedAt": "2024-04-11T10:40:20.998Z"
}
]
}
}
```
:::info
**Note:** The custom payload feature is only available in the enterprise edition.
:::
#### Discord Webhook
Discord webhook can be configured to send messages to a Discord channel. Discord request body should contain content, embeds or attachments, otherwise request will fail. Below is an example of Discord webhook payload. More details can be found [here](https://birdie0.github.io/discord-webhooks-guide/discord_webhook.html)
```json
{
"content": "Hello, this is a webhook message",
"embeds": [
{
"title": "Webhook",
"description": "This is a webhook message",
"color": 16711680
}
]
}
```
To send complete event data to Discord, use below payload
```
{
"content" : {{ json ( json event ) }}
}
```
One can also customize the payload as per the requirement. For example, to send only the `Title` field to Discord, use below payload. Note that, the value of `content` is what that will get displayed in the Discord channel.
```
{
"content": "{{ event.data.rows.[0].Title }}"
}
```
## Environment Variables
In self-hosted version, you can configure the following environment variables to customize the webhook behavior.
- NC_ALLOW_LOCAL_HOOKS: Allow localhost based links to be triggered. Default: false
Find more about environment variables [here](/getting-started/self-hosted/environment-variables)