Button

This article explains how to create & work with a Button field.

The Button Field allows users to create interactive buttons within their tables. These buttons can trigger specific actions, making workflows more dynamic and efficient. With the Button Field, you can navigate to external URLs, run custom webhooks, or even run custom scripts with a single click.

NocoDB currently supports following actions for the Button Field:

  1. Open URL: Opens a new tab with a URL generated by a formula within the button field. The URL can be static or dynamic based on the current record's data.
  2. Run Webhook: Trigger a webhook with the configured URL & custom payload. Payload can include data from the current record.
  3. Run Script: Execute a custom script that can perform various operations on the current record or the entire table. Current record information can be accessed using the row variable in the script.
Run Script action is currently available only in the NocoDB Cloud version, Plus and above plans.

Create a Button Field

  1. Click on the + icon to the right of the Fields header.
  2. In the dropdown modal, enter the field name (optional).
  3. Select the field type as Button from the dropdown.
  4. Configure the button appearance settings as needed. This includes the button text, color, and icon.
  5. Select the action type from the dropdown.
  6. Configure the button action settings as needed. This depends on the action you want the button to perform
    • Open URL: Use the formula editor to create dynamic URLs.
    • Run Webhook: Select a webhook from the dropdown OR create a new webhook by clicking on the + icon.
    • Run Script: Select a script from the dropdown.
  7. Click on the Save Field button.

Button URL

image

Button Webhook

image

For the "Run Webhook" action, a webhook with the required trigger type must first be created in the Webhooks section. The same webhook can be reused across multiple Button fields. Please note that the "Run Webhook" action is not available in shared views or shared bases.

Edit Webhook

To edit a webhook, click on the Edit icon next to the webhook name in the Button field settings. This will open the webhook settings modal, where you can edit the webhook URL, method, headers, and payload. Click on the Save changes button to save the changes.

image

Created webhook can be accessed by using the Webhook section in details tab. For more details, refer to the following articles:

Deleting a webhook will remove it from all Button fields that reference it, whereas deleting a Button field will not affect the associated webhook. A single webhook can also be reused across multiple Button fields.

Button Script

image