Enviando um formulário com um tipo de campo de entidade (páginas, produtos...)

Neste exemplo, demonstramos como enviar um formulário que inclui um tipo de campo de entidade, como páginas ou produtos, usando a API OneEntry.

✅ Propósito do cenário:

• Obter a configuração do formulário da Plataforma OneEntry
• O usuário seleciona um dos elementos da entidade
• Enviar os dados coletados para a API OneEntry.

✅ O que você precisa:

• Uma PROJECT_URL e APP_TOKEN válidas para autenticação com a API OneEntry.
• Um formulário pré-configurado no OneEntry com um marcador (por exemplo, entidade) e campos incluindo um do tipo "entidade".
• Campos de formulário pré-configurados incluindo um do tipo "entidade".

📌 Importante:

• Não tratamos erros nesses exemplos.
• Você pode tratar erros em trycatch ou em uma construção como "await Promise.catch((error) => error)"

Cenário

1. Importar oneEntry e definir url e token

Exemplo:

import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'sua-url-do-projeto';
const APP_TOKEN = 'seu-token-do-app';

2. Criando um cliente API com a função defineOneEntry()

Exemplo:

const { AuthProvider, Orders, Payments, Forms } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

3. Recebemos os dados do formulário da Plataforma OneEntry para gerar um formulário no frontend com Forms.getFormByMarker()

Exemplo:

const formData = await Forms.getFormByMarker('entity');

Resultado:

{
  "id": 2,
  "attributeSetId": 1,
  "type": "data",
  "localizeInfos": {
    "title": "Entidade",
    "titleForSite": "",
    "successMessage": "",
    "unsuccessMessage": "",
    "urlAddress": "",
    "database": "0",
    "script": "0"
  },
  "version": 17,
  "position": 1,
  "identifier": "entity",
  "processingType": "script",
  "templateId": null,
  "attributes": [
    {
      "type": "entity",
      "marker": "entity",
      "isLogin": null,
      "isSignUp": null,
      "position": 1,
      "settings": {},
      "isVisible": true,
      "listTitles": [
        {
          "id": 1,
          "depth": 0,
          "title": "Catálogo",
          "parentId": null,
          "position": 1,
          "selected": true
        },
        {
          "id": 7,
          "depth": 0,
          "title": "Página Premium",
          "parentId": null,
          "position": 2,
          "selected": true
        }
      ],
      "validators": {},
      "localizeInfos": {
        "title": "Entidade"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    }
  ]
}

4. Selecione um dos elementos do atributo do tipo entidade e passe para o valor como um array de ids(números) para páginas ou array de strings para produtos

Exemplo:

[
  {
    "marker": "entity",
    "type": "entity",
    "value": [
      1
    ]
  }
]

5. Envie os dados do formulário com FormData.postFormsData()

Exemplo:

const response = FormData.postFormsData({
  formIdentifier: 'entity',
  formData: fieldsData,
});
console.log(response);

Resultado:

{
  "formData": {
    "formIdentifier": "entity",
    "time": "2025-08-29T17:30:21.596Z",
    "formData": [
      {
        "marker": "entity",
        "type": "entity",
        "value": [
          1
        ]
      }
    ],
    "id": 94
  },
  "actionMessage": ""
}

Exemplo final

// 1. Importar oneEntry e definir PROJECT_URL e APP_TOKEN
import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'sua-url-do-projeto';
const APP_TOKEN = 'seu-token-do-app';

// 2. Criando um cliente API:
const { Forms, FormData } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

// 3. Recebemos os dados do formulário da Plataforma OneEntry para gerar um formulário no frontend
const formData = await Forms.getFormByMarker('entity');

// 4. selecionar um dos elementos do atributo do tipo entidade
const fieldsData = [
  {
    marker: 'entity',
    type: 'entity',
    value: [
      1,
    ],
  },
];

// 5. Envie os dados do formulário com FormData.postFormsData()
let response = await FormData.postFormsData({
  formIdentifier: 'entity',
  formData: fieldsData,
});
// console.log(response);