Soumettre un formulaire avec un type de champ d'entité (pages, produits...)

Dans cet exemple, nous démontrons comment soumettre un formulaire qui inclut un type de champ d'entité, tel que des pages ou des produits, en utilisant l'API OneEntry.

✅ Objectif du scénario :

• Obtenir la configuration du formulaire depuis la plateforme OneEntry
• L'utilisateur sélectionne l'un des éléments de l'entité
• Soumettre les données collectées à l'API OneEntry.

✅ Ce dont vous avez besoin :

• Une PROJECT_URL et un APP_TOKEN valides pour l'authentification avec l'API OneEntry.
• Un formulaire préconfiguré dans OneEntry avec un marqueur (par exemple, entité) et des champs incluant un de type "entité".
• Des champs de formulaire préconfigurés incluant un de type "entité".

📌 Important :

• Ces exemples n'incluent pas la gestion des erreurs.
• Vous pouvez gérer les erreurs en utilisant un bloc try-catch ou en employant une construction comme await Promise.catch((error) => error).

Scénario

1. Importer defineOneEntry depuis le SDK et définir l'url et le token

Exemple :

import { defineOneEntry } from 'oneentry';

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

2. Créer un client API avec la fonction defineOneEntry()

Exemple :

const { Forms, FormData } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

3. Nous recevons les données du formulaire depuis la plateforme OneEntry pour générer un formulaire sur le frontend avec Forms.getFormByMarker()

Exemple :

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

Résultat :

{
  "id": 2,
  "attributeSetId": 1,
  "type": "data",
  "localizeInfos": {
    "title": "Entité",
    "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": "Catalogue",
          "parentId": null,
          "position": 1,
          "selected": true
        },
        {
          "id": 7,
          "depth": 0,
          "title": "Page premium",
          "parentId": null,
          "position": 2,
          "selected": true
        }
      ],
      "validators": {},
      "localizeInfos": {
        "title": "Entité"
      },
      "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
        }
      ]
    }
  ]
}

Obtenir des paramètres supplémentaires pour la soumission du formulaire

Exemple :

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

5. Sélectionner l'un des éléments de l'attribut de type entité et passer à la valeur sous forme de tableau d'identifiants (nombres) pour les pages ou tableau de chaînes pour les produits

Exemple :

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

6. Poster les données du formulaire avec FormData.postFormsData()

Exemple :

const response = FormData.postFormsData({
  formIdentifier: 'entity',
  formData: fieldsData,
  formModuleConfigId: moduleFormConfig?.id || 0,
  moduleEntityIdentifier:
    moduleFormConfig?.entityIdentifiers?.[0]?.id || '',
  replayTo: null,
  status: 'sent',
});
console.log(response);

Résultat :

{
  "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": ""
}

Exemple final

// 1. Importer defineOneEntry depuis le SDK et définir PROJECT_URL et APP_TOKEN
import { defineOneEntry } from 'oneentry';

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

// 2. Créer un client API :
const { Forms, FormData } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

// 3. Nous recevons les données du formulaire depuis la plateforme OneEntry pour générer un formulaire sur le frontend
const formData = await Forms.getFormByMarker('entity');

// 4. Obtenir des paramètres supplémentaires pour la soumission du formulaire
const moduleFormConfig = formData?.moduleFormConfigs?.[0];

// 5. sélectionner l'un des éléments de l'attribut de type entité
const fieldsData = [
  {
    marker: 'entity',
    type: 'entity',
    value: [
      1,
    ],
  },
];

// 6. Poster les données du formulaire avec 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);