Skip to content

Send typed values from an HTTP action ​

Use method: "http" with a modal editor when the user must enter values before a POST, PUT, or PATCH request. Put the action in a panel's panelActions[].actions[] or in a supported row-action group. The panel reads each field's type and renders the matching control. A Boolean field is therefore a checkbox. After the user selects it, the JSON body contains true or false, not a string. An existing null remains null and appears as an indeterminate checkbox until the user changes it; when neither row data nor a defaultValue supplies the attribute, it can remain absent from the body. If the endpoint requires a strict Boolean, set a Boolean defaultValue for a missing attribute. An existing null is still preserved; the endpoint must validate it because the current editor does not enforce required.

Complete fixture-mode configuration ​

The following standalone Table fragment uses reader-facing IDs and a shortened editor so that the two request-body branches stay visible in one example. It is derived from, but is not a literal copy of, the checked-in executable fixture. That fixture uses panel ID local-attribute-renderer-forms-action-input, action IDs ending in -http and -http-configured-body, and the full editor exported as localAttributeRendererHttpInputEditor.

To run the checked-in fixture from a clean checkout, set NUXT_PUBLIC_API_PREFIX=/local-api and NUXT_LOCAL_FIXTURE_API_ENABLED=true in apps/panel/.env.local, start it with pnpm -C apps/panel dev, sign in with any non-empty credentials, and open the demo link below. The endpoint /attribute-renderer/http-action exists only in that mode; replace it with an endpoint from your application's API contract in a real configuration.

json
{
  "id": "typed-http-actions",
  "type": "table",
  "request": { "metaTypeName": "LocalAttributeRendererForm" },
  "panelActions": [
    {
      "id": "http-actions",
      "renderType": "inline_buttons",
      "actions": [
        {
          "id": "typed-http-submit",
          "method": "http",
          "label": "HTTP: typed fields",
          "request": {
            "method": "POST",
            "url": "/attribute-renderer/http-action",
            "body": {
              "configuredOnly": "editor-must-replace-this-body"
            }
          },
          "editor": {
            "mode": "modal",
            "fields": [
              {
                "attribute": "enabled",
                "label": "Enabled",
                "type": "Boolean",
                "defaultValue": true
              },
              {
                "attribute": "jsonValue",
                "label": "JSON",
                "type": "Json",
                "defaultValue": { "value": 10, "unit": "kg" }
              },
              {
                "attribute": "readonlyNote",
                "type": "String",
                "readonly": true,
                "defaultValue": "local fixture"
              },
              {
                "attribute": "hiddenToken",
                "type": "String",
                "hidden": true,
                "defaultValue": "fixture-hidden"
              }
            ]
          }
        },
        {
          "id": "configured-http-submit",
          "method": "http",
          "label": "HTTP: configured body",
          "request": {
            "method": "POST",
            "url": "/attribute-renderer/http-action",
            "body": { "mode": "configured-body" }
          }
        }
      ]
    }
  ]
}

Open the first action. The panel copies available row values into the form and applies defaultValue only when an attribute is undefined, so an existing false, null, 0, or empty string is preserved. When the user selects Apply, the controls write typed values to the form object. The HTTP action passes a shallow request object to $fetchApi, which serializes it as JSON. The submitted form is the complete request body, so the configuredOnly sentinel is not sent.

Open the second action to test the other branch. Because it has no editor, the HTTP action sends its configured request.body unchanged. Editor values and a configured body are never merged.

The HTTP action waits for the endpoint response. On success, the panel shows a success toast, closes the modal when one was opened, and invalidates the current panel's queries. On failure, it shows the endpoint error and leaves the modal available; correct the values and select Apply again.

Supported fields and limits ​

request.method accepts GET, POST, PUT, PATCH, or DELETE, and request.url selects the target endpoint. Use a typed editor when the endpoint expects an input body, normally with POST, PUT, or PATCH.

layout: "row", hidden, readonly, listOfValue, comment, and regEx work in the modal. Hidden and read-only values remain part of the submitted form, which lets a configuration send fixed contextual fields. editor.tabs and the Object selector are not supported by this HTTP modal. For an object identifier, use a scalar field until that selector is implemented for HTTP actions.

Open the HTTP typed-fields fixture

In the fixture, open Action input. HTTP: typed fields proves both checkbox states, JSON preservation, hidden/read-only defaults, and editor-body replacement. HTTP: configured body proves the no-editor fallback.

Exact property reference ​

Next, use the editor guide to choose fields and grouping, or return to the action catalog to choose a different action method.