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 :

• Nous ne gérons pas les erreurs dans ces exemples.
• Vous pouvez gérer les erreurs dans un trycatch ou dans une construction comme "await Promise.catch((error) => error)"

Scénario

1. Importer oneEntry 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 { AuthProvider, Orders, Payments, Forms } = 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
    }
  ]
}

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

Exemple :

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

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

Exemple :

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

Résultat :

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

Exemple final

// 1. Importer oneEntry 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. sélectionner l'un des éléments de l'attribut de type entité
const fieldsData = [
  {
    marker: 'entity',
    type: 'entity',
    value: [
      1,
    ],
  },
];

// 5. Poster les données du formulaire avec FormData.postFormsData()
let response = await FormData.postFormsData({
  formIdentifier: 'entity',
  formData: fieldsData,
});
// console.log(response);