Gửi một biểu mẫu với loại trường thực thể (trang, sản phẩm...)

Trong ví dụ này, chúng tôi sẽ trình bày cách gửi một biểu mẫu bao gồm loại trường thực thể, chẳng hạn như trang hoặc sản phẩm, sử dụng API OneEntry.

✅ Mục đích của kịch bản:

• Lấy cấu hình biểu mẫu từ Nền tảng OneEntry
• Người dùng chọn một trong các phần tử của thực thể
• Gửi dữ liệu đã thu thập đến API OneEntry.

✅ Những gì bạn cần:

• Một PROJECT_URL và APP_TOKEN hợp lệ để xác thực với API OneEntry.
• Một biểu mẫu đã được cấu hình trước trong OneEntry với một dấu hiệu (ví dụ: thực thể) và các trường bao gồm một loại "thực thể".
• Các trường biểu mẫu đã được cấu hình trước bao gồm một loại "thực thể".

📌 Quan trọng:

• Những ví dụ này không bao gồm xử lý lỗi.
• Bạn có thể quản lý lỗi bằng cách sử dụng khối try-catch hoặc bằng cách sử dụng một cấu trúc như await Promise.catch((error) => error).

Kịch bản

1. Nhập defineOneEntry từ SDK và xác định url và token

Ví dụ:

import { defineOneEntry } from 'oneentry';

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

2. Tạo một khách hàng API với hàm defineOneEntry()

Ví dụ:

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

3. Chúng tôi nhận dữ liệu biểu mẫu từ Nền tảng OneEntry để tạo một biểu mẫu trên giao diện người dùng với Forms.getFormByMarker()

Ví dụ:

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

Kết quả:

{
  "id": 2,
  "attributeSetId": 1,
  "type": "data",
  "localizeInfos": {
    "title": "Entity",
    "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": "Catalog",
          "parentId": null,
          "position": 1,
          "selected": true
        },
        {
          "id": 7,
          "depth": 0,
          "title": "Premium page",
          "parentId": null,
          "position": 2,
          "selected": true
        }
      ],
      "validators": {},
      "localizeInfos": {
        "title": "Entity"
      },
      "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
        }
      ]
    }
  ]
}

Lấy các cài đặt bổ sung cho việc gửi biểu mẫu

Ví dụ:

const moduleFormConfig = formData.moduleFormConfigs[0];

5. Chọn một trong các phần tử của thuộc tính loại thực thể và truyền vào giá trị dưới dạng mảng các id (số) cho trang hoặc mảng các chuỗi cho sản phẩm

Ví dụ:

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

6. Đăng dữ liệu biểu mẫu với FormData.postFormsData()

Ví dụ:

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

Kết quả:

{
  "formData": {
    "formIdentifier": "entity",
    "time": "2025-12-02T19:08:18.617Z",
    "formData": [
      {
        "marker": "entity",
        "type": "entity",
        "value": [
          1
        ]
      }
    ],
    "entityIdentifier": "services",
    "fingerprint": "UQ_rrofe2",
    "isUserAdmin": false,
    "formModuleId": 1,
    "userIdentifier": null,
    "parentId": null,
    "id": 129
  },
  "actionMessage": ""
}

Ví dụ cuối cùng

// 1. Import defineOneEntry from SDK and define PROJECT_URL and APP_TOKEN
import { defineOneEntry } from 'oneentry';

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

// 2. Creating an API client:
const { Forms, FormData } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

// 3. We receive form data from OneEntry Platform to generate a form on the frontend
const formData = await Forms.getFormByMarker('entity');

// 4. Get additional settings for the form submission
const moduleFormConfig = formData.moduleFormConfigs[0];

// 5. select one of the elements of the entity type attribute
const fieldsData = [
  {
    marker: 'entity',
    type: 'entity',
    value: [
      1,
    ],
  },
];

// 6. Post forms data with FormData.postFormsData()
let response = await FormData.postFormsData({
  formIdentifier: 'entity',
  formData: fieldsData,
  formModuleConfigId: moduleFormConfig.id,
  moduleEntityIdentifier:
    moduleFormConfig.entityIdentifiers[0].id,
  replayTo: null,
  status: 'sent',
});
// console.log(response);