Pular para o conteúdo principal

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.

✅ Objetivo 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álidos 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:

  • Estes exemplos não incluem tratamento de erros.
  • Você pode gerenciar erros usando um bloco try-catch ou empregando uma construção como await Promise.catch((error) => error).

Cenário

1. Importar defineOneEntry do SDK 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 { 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 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
}
],
"moduleFormConfigs": [
{
"id": 1,
"moduleIdentifier": "content",
"isGlobal": false,
"isClosed": false,
"viewOnlyUserData": false,
"commentOnlyUserData": false,
"entityIdentifiers": [
{
"id": "services",
"isNested": false
}
]
}
]
}

Obter configurações adicionais para o envio do formulário

Exemplo:

const moduleFormConfig = formData?.moduleFormConfigs?.[0];

5. Selecionar um dos elementos do atributo do tipo entidade e passar 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
]
}
]

6. Enviar os dados do formulário com FormData.postFormsData()

Exemplo:

const response = FormData.postFormsData({
formIdentifier: 'entity',
formData: fieldsData,
formModuleConfigId: moduleFormConfig?.id || 0,
moduleEntityIdentifier:
moduleFormConfig?.entityIdentifiers?.[0]?.id || '',
replayTo: null,
status: 'sent',
});
console.log(response);
Resultado:
{
"formData": {
"formIdentifier": "entity",
"time": "2025-11-10T06:29:42.887Z",
"formData": [
{
"marker": "entity",
"type": "entity",
"value": [
1
]
}
],
"entityIdentifier": "services",
"fingerprint": "UQ_rrofe2",
"isUserAdmin": false,
"formModuleId": 1,
"userIdentifier": null,
"parentId": null,
"id": 118
},
"actionMessage": ""
}

Exemplo final

// 1. Importar defineOneEntry do SDK 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. Obter configurações adicionais para o envio do formulário
const moduleFormConfig = formData?.moduleFormConfigs?.[0];

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

// 6. Enviar os dados do formulário com FormData.postFormsData()
let response = await FormData.postFormsData({
formIdentifier: 'entity',
formData: fieldsData,
formModuleConfigId: moduleFormConfig?.id || 0,
moduleEntityIdentifier:
moduleFormConfig?.entityIdentifiers?.[0]?.id || '',
replayTo: null,
status: 'sent',
});
// console.log(response);