Browse Source

Merge pull request #8248 from nocodb/nc-enable-webhook-body

Nc enable webhook body
pull/8255/head
Pranav C 3 months ago committed by GitHub
parent
commit
6ed6aab6ac
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 13
      packages/nc-gui/components/webhook/Editor.vue
  2. 61
      packages/noco-docs/docs/130.automation/020.webhook/020.create-webhook.md

13
packages/nc-gui/components/webhook/Editor.vue

@ -76,7 +76,6 @@ let hookRef = reactive<
version: 'v2',
})
const isBodyShownEasterEgg = ref(false)
const isBodyShown = ref(hookRef.version === 'v1' || isEeUI)
const urlTabKey = ref<'params' | 'headers' | 'body'>('params')
@ -478,13 +477,6 @@ const getDefaultHookName = (hooks: HookType[]) => {
return extractNextDefaultName([...hooks.map((el) => el?.title || '')], defaultHookName)
}
const handleToggleEasterEgg = () => {
isBodyShownEasterEgg.value = !isBodyShownEasterEgg.value
if (!(isBodyShown.value && isBodyShownEasterEgg.value) && urlTabKey.value === 'body') {
urlTabKey.value = 'params'
}
}
watch(
() => hookRef.eventOperation,
() => {
@ -662,7 +654,6 @@ onMounted(async () => {
size="large"
class="nc-select-hook-url-method"
dropdown-class-name="nc-dropdown-hook-notification-url-method"
@dblclick="handleToggleEasterEgg"
>
<a-select-option v-for="(method, i) in methodList" :key="i" :value="method.title">
<div class="flex items-center gap-2 justify-between">
@ -700,7 +691,7 @@ onMounted(async () => {
<LazyApiClientHeaders v-model="hookRef.notification.payload.headers" class="!p-4" />
</a-tab-pane>
<a-tab-pane v-if="isBodyShown && isBodyShownEasterEgg" key="body" tab="Body">
<a-tab-pane v-if="isBodyShown" key="body" tab="Body">
<LazyMonacoEditor
v-model="hookRef.notification.payload.body"
disable-deep-compare
@ -812,7 +803,7 @@ onMounted(async () => {
<a-row>
<a-col :span="24">
<div v-if="isBodyShown && isBodyShownEasterEgg" class="text-gray-600">
<div v-if="isBodyShown" class="text-gray-600">
<div class="flex items-center">
<em
>{{ $t('msg.webhookBodyMsg1') }} <strong>{{ $t('msg.webhookBodyMsg2') }}</strong>

61
packages/noco-docs/docs/130.automation/020.webhook/020.create-webhook.md

@ -45,7 +45,7 @@ Webhook will be triggered only when the configured condition wasn't met before t
In summary, webhook will be triggered only when `Condition(old-record) = false` and `Condition(new-record) = true`.
### Webhook Response Sample
### Webhook response sample
<Tabs>
<TabItem value="After Insert" label="After Insert">
@ -268,6 +268,65 @@ In summary, webhook will be triggered only when `Condition(old-record) = false`
[//]: # ()
[//]: # (![image]&#40;https://user-images.githubusercontent.com/35857179/228790148-1e3f21c7-9385-413a-843f-b93073ca6bea.png&#41;)
### Webhook with custom payload ☁
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.

Loading…
Cancel
Save