Formulário com múltiplos campos gerado usando JSON

Ajude-me a construir meu fluxo de trabalho
1

Oi,

Tenho um fluxo de trabalho em que gostaria de criar um dropdown com algumas datas com base no envio do nó de gatilho do formulário. Também gostaria de adicionar uma condição com base no botão de rádio selecionado no nó de gatilho do formulário. Criei um nó de código JSON como no arquivo anexado. Tenho um problema, porém, em construir o próximo formulário corretamente (nó “Add dates” no fluxo de trabalho anexado). Quero que ele exiba dois campos: o dropdown rotulado como “form fields” e a entrada de texto rotulada como “NIP”. Infelizmente, ele exibe apenas um campo (como no fluxo de trabalho anexado) ou, após algumas modificações, lança um erro “not valid json”. Alguém teria uma ideia de como construir este nó para atingir meu objetivo?

{
  "name": "[2.9] Zadanie domowe - formularz szkolenia",
  "nodes": [
    {
      "parameters": {
        "formTitle": "Formularz zapisu na szkolenie",
        "formFields": {
          "values": [
            {
              "fieldLabel": "Imię i nazwisko:",
              "placeholder": "Jan Kowalski",
              "requiredField": true
            },
            {
              "fieldLabel": "e-mail:",
              "fieldType": "email",
              "placeholder": "a@b.cd",
              "requiredField": true
            },
            {
              "fieldLabel": "Telefon:",
              "placeholder": "+48 123 456 789",
              "requiredField": true
            },
            {
              "fieldLabel": "Bierzesz udział jako:",
              "fieldType": "radio",
              "fieldOptions": {
                "values": [
                  {
                    "option": "Firma"
                  },
                  {
                    "option": "Osoba prywatna"
                  }
                ]
              },
              "requiredField": true
            }
          ]
        },
        "options": {}
      },
      "type": "n8n-nodes-base.formTrigger",
      "typeVersion": 2.5,
      "position": [
        0,
        0
      ],
      "id": "28e29a54-80a4-4197-af04-2389d4a3221e",
      "name": "On form submission",
      "webhookId": "67fa2c56-27e9-470d-968e-a352bef94e20"
    },
    {
      "parameters": {
        "operation": "completion",
        "completionTitle": "={{ $if($json != null, \"Sukces!\", \"Oj, coś poszło nie tak...\") }}",
        "completionMessage": "={{ $json.summary[0].fieldLabel }}",
        "options": {}
      },
      "type": "n8n-nodes-base.form",
      "typeVersion": 2.5,
      "position": [
        768,
        0
      ],
      "id": "c9cb7630-fdf6-4d2e-8c74-45f660e4c518",
      "name": "Form",
      "webhookId": "3ae63389-41aa-41c6-ae51-5b8cba10bb13"
    },
    {
      "parameters": {
        "defineForm": "json",
        "jsonOutput": "={{ $json.formFields, $json.NIP }}",
        "options": {}
      },
      "type": "n8n-nodes-base.form",
      "typeVersion": 2.5,
      "position": [
        416,
        0
      ],
      "id": "6f462d5f-f41b-4f5b-afc1-333de809002f",
      "name": "Add Dates",
      "webhookId": "f58ff39c-4aeb-49b9-a448-5f843494f823"
    },
    {
      "parameters": {
        "jsCode": "const label = \"Droga/Drogi \" + $(\"Calculate dates and NIP\").first().json[\"Imię i nazwisko:\"] + \".\\nZostałaś/zostałeś pomyślnie zarejestrowana/zarejestrowany na szkolenie w dniu:\\n\" + $input.first().json[\"Wybierz termin\"];\n\nconst formFields = [\n  {\n    fieldLabel: label\n  }\n];\n\nreturn [{\n  json: {\n    summary: formFields\n  }\n}]"
      },
      "type": "n8n-nodes-base.code",
      "typeVersion": 2,
      "position": [
        592,
        0
      ],
      "id": "b31b8584-6b17-4411-84b9-9f28378389f4",
      "name": "Success Summary Text"
    },
    {
      "parameters": {
        "jsCode": "const availableDates = Array.from({ length: 6 }, (_, offset) =\
 {\
  const dayOffset = (today) =\
> {\
    let off = 2 - today;\
    return off;\
  }\
  \
  const date = $now.plus({ weeks: offset + 1, days: dayOffset(DateTime.local().weekday) });\
\
  \
  return {\
    option: date.toFormat('dd.MM.yyyy')\
  };\
});\
\
const formFields = [\
  {\
    fieldLabel: \"Wybierz termin\",\
    fieldType: \"dropdown\",\
    requiredField: true,\
    fieldOptions: {\
      values: availableDates\
    }\
  }\
];\
\
const nipInput = ($input.first().json[\"Bierzesz udział jako:\"] === \"Firma\" ? [\
  {\
    fieldLabel: \"Podaj NIP\",\
    fieldType: \"text\",\
    requiredField: true\
  }\
] : null );\
\
return [{\
  json: {\
    ...$input.first().json,\
    formFields: formFields,\
    NIP: nipInput,\
    //availableDates: availableDates.map(d =\
> d.option)\
  }\
}]"
      },
      "type": "n8n-nodes-base.code",
      "typeVersion": 2,
      "position": [
        208,
        0
      ],
      "id": "57f1ca26-2ddb-4b49-b670-e83845632a8f",
      "name": "Calculate dates and NIP"
    }
  ],
  "pinData": {},
  "connections": {
    "On form submission": {
      "main": [
        [
          {
            "node": "Calculate dates and NIP",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Add Dates": {
      "main": [
        [
          {
            "node": "Success Summary Text",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Success Summary Text": {
      "main": [
        [
          {
            "node": "Form",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "Calculate dates and NIP": {
      "main": [
        [
          {
            "node": "Add Dates",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  },
  "active": false,
  "settings": {
    "executionOrder": "v1",
    "binaryMode": "separate"
  },
  "versionId": "b4b36e4b-ee4d-4192-bf1d-c271d725b0b0",
  "meta": {
    "instanceId": "6bf048c6d4d3d2ea0ff37f1fadbd0c376cd8e3dfc89fd11ea9adc8fc9affaad7"
  },
  "id": "DmjAWBhbgcnJsCAo",
  "tags": []
}
1 curtida
2

Oi @Michal_Moraszczyk

Você pode tentar isso?

2 curtidas
3

Oi Michal,

O problema provavelmente está em como seu nó Code está retornando o JSON. O nó Form espera um array JSON no nível superior da saída — não aninhado dentro de um objeto ou envolvido em uma string.

Aqui está uma estrutura funcional para seu nó Form “Add dates” (configurado para “Define form using JSON”):

[
  {
    "fieldLabel": "Select Date",
    "fieldType": "dropdown",
    "fieldOptions": {
      "values": [
        { "option": "your_dynamic_date_1" },
        { "option": "your_dynamic_date_2" }
      ]
    },
    "requiredField": true
  },
  {
    "fieldLabel": "NIP",
    "fieldType": "text",
    "placeholder": "Enter NIP",
    "requiredField": true
  }
]

Armadilhas comuns que causam “not valid json” ou apenas um campo aparecendo:

  1. Envolver em um objeto — Não retorne { "fields": [...] }. O nó Form espera o array diretamente. Retorne apenas o array.

  2. Retornar como string — Se seu nó Code fizer JSON.stringify(), o nó Form recebe uma string em vez de um objeto analisado. Retorne o array como um objeto real.

  3. Múltiplos itens em vez de um — Seu nó Code deve retornar um item contendo o array completo. Use este padrão em seu nó Code:

const fields = [
  {
    fieldLabel: "Select Date",
    fieldType: "dropdown",
    fieldOptions: {
      values: dates.map(d => ({ option: d }))
    },
    requiredField: true
  },
  {
    fieldLabel: "NIP",
    fieldType: "text",
    placeholder: "Enter NIP",
    requiredField: true
  }
];

return [{ json: fields }];

A parte return [{ json: fields }] é fundamental — um único item, o array vai dentro de json. Isso é o que a maioria das pessoas deixa passar.

Para a condição do botão de rádio — use um nó IF depois do Form Trigger para fazer uma ramificação, e conecte a ramificação correta ao nó Form “Add dates”. Cada ramificação pode ter seu próprio nó Form com definições de campos diferentes.

Espero ter ajudado!

1 curtida
4

Oi,

Sua solução funcionou perfeitamente para mim. Obrigado!

1 curtida
5

Oi,

Sua explicação é completa e valiosa. Vou levar sua recomendação em consideração - elas serão úteis também nos meus fluxos de trabalho futuros. Obrigado!