Saltar al contenido principal

Enviando un formulario con un tipo de campo de entidad (páginas, productos...)

✅ Propósito del escenario:

  • Obtener la configuración del formulario desde OneEntry CMS
  • El usuario selecciona uno de los elementos de la entidad
  • Enviar los datos recopilados a una API de OneEntry.

✅ Lo que necesitas:

  • Una PROJECT_URL y APP_TOKEN válidos para la autenticación con la API de OneEntry.
  • Un formulario preconfigurado en OneEntry con un marcador (por ejemplo, entidad) y campos que incluyan uno de tipo "entidad".
  • Campos de formulario preconfigurados que incluyan uno de tipo "entidad".

📌 Importante:

  • No manejamos errores en estos ejemplos.
  • Puedes manejar errores en trycatch o en una construcción como "await Promise.catch((error) => error)"

Escenario

1. Importar oneEntry y definir url y token

Ejemplo:

import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

2. Crear un cliente API con la función defineOneEntry()

Ejemplo:

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

3. Recibimos datos del formulario desde OneEntry CMS para generar un formulario en el frontend con Forms.getFormByMarker()

Ejemplo:

const formData = await Forms.getFormByMarker('entity');
Resultado:
{
"id": 2,
"attributeSetId": 1,
"type": "data",
"localizeInfos": {
"title": "Entidad",
"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": "Entidad"
},
"additionalFields": [],
"isNotificationEmail": null,
"isNotificationPhoneSMS": null,
"isNotificationPhonePush": null
}
]
}

4. Seleccionar uno de los elementos del atributo de tipo entidad y pasar a valor como un array de ids(números) para páginas o array de cadenas para productos

Ejemplo:

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

5. Publicar datos del formulario con FormData.postFormsData()

Ejemplo:

const response = FormData.postFormsData({
formIdentifier: 'entity',
formData: fieldsData,
});
console.log(response);
Resultado:
{
"formData": {
"formIdentifier": "entity",
"time": "2025-04-30T20:11:30.059Z",
"formData": [
{
"marker": "entity",
"type": "entity",
"value": [
1
]
}
],
"id": 67
},
"actionMessage": ""
}

Ejemplo final

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

const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

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

// 3. Recibimos datos del formulario desde OneEntry CMS para generar un formulario en el frontend
const formData = await Forms.getFormByMarker('entity');

// 4. seleccionar uno de los elementos del atributo de tipo entidad
const fieldsData = [
{
marker: 'entity',
type: 'entity',
value: [
1,
],
},
];

// 5. Publicar datos del formulario con FormData.postFormsData()
let response = await FormData.postFormsData({
formIdentifier: 'entity',
formData: fieldsData,
});
// console.log(response);