Triển khai một biểu mẫu React Formik với hook useFormConfig

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

• Triển khai một biểu mẫu Formik sử dụng hook useFormConfig của OneEntry.
• Đảm bảo dữ liệu được định dạng và xác thực đúng trước khi gửi.

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

• Một PROJECT_URL và APP_TOKEN hợp lệ để xác thực với API của OneEntry.
• Một môi trường phát triển được thiết lập với React.js (ví dụ: Next.js, Create React App).
• Được cấu hình trong biểu mẫu liên hệ của giao diện OneEntry với dấu hiệu "contact_us".

📌 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 cấu trúc như await Promise.catch((error) => error).
• Đảm bảo rằng dấu hiệu biểu mẫu (ví dụ: "contact_us") được sử dụng trong Forms.getFormByMarker khớp với một biểu mẫu hiện có trong dự án OneEntry của bạn.

Kịch bản

1. Nhập defineOneEntry từ SDK và định nghĩa 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 client API với hàm defineOneEntry()

Ví dụ:

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

3. Lấy dữ liệu biểu mẫu từ oneentry

Ví dụ:

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

Kết quả:

{
  "id": 3,
  "attributeSetId": 2,
  "type": "data",
  "localizeInfos": {
    "title": "Contact us",
    "titleForSite": "",
    "successMessage": "Message about successful data processing",
    "unsuccessMessage": "Message about unsuccessful data processing",
    "urlAddress": "",
    "database": "0",
    "script": "0"
  },
  "version": 5,
  "position": 1,
  "identifier": "contact_us",
  "processingType": "script",
  "templateId": null,
  "attributes": [
    {
      "type": "string",
      "marker": "first_name",
      "isLogin": null,
      "isSignUp": null,
      "position": 1,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {
        "requiredValidator": {
          "strict": true
        }
      },
      "localizeInfos": {
        "title": "First name"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "string",
      "marker": "email",
      "isLogin": null,
      "isSignUp": null,
      "position": 2,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {
        "requiredValidator": {
          "strict": true
        },
        "emailInspectionValidator": true
      },
      "localizeInfos": {
        "title": "Email"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "string",
      "marker": "surname",
      "isLogin": null,
      "isSignUp": null,
      "position": 3,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {
        "stringInspectionValidator": {
          "stringMax": 0,
          "stringMin": 0,
          "stringLength": 0
        }
      },
      "localizeInfos": {
        "title": "Surname"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "list",
      "marker": "topic",
      "isLogin": null,
      "isSignUp": null,
      "position": 4,
      "settings": {},
      "isVisible": true,
      "listTitles": [
        {
          "title": "Article",
          "value": "article",
          "extended": {
            "type": null,
            "value": null
          },
          "position": 1
        },
        {
          "title": "Article-2",
          "value": "article-2",
          "extended": {
            "type": null,
            "value": null
          },
          "position": 2
        }
      ],
      "validators": {
        "requiredValidator": {
          "strict": true
        }
      },
      "localizeInfos": {
        "title": "Topic"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "text",
      "marker": "text",
      "isLogin": null,
      "isSignUp": null,
      "position": 5,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "Text"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "spam",
      "marker": "spam",
      "isLogin": null,
      "isSignUp": null,
      "position": 6,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "You're not a robot?"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "button",
      "marker": "send",
      "isLogin": null,
      "isSignUp": null,
      "position": 7,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "Send"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    }
  ],
  "moduleFormConfigs": [
    {
      "id": 2,
      "moduleIdentifier": "content",
      "isGlobal": false,
      "isClosed": false,
      "viewOnlyUserData": false,
      "commentOnlyUserData": false,
      "entityIdentifiers": [
        {
          "id": "services",
          "isNested": false
        }
      ]
    }
  ]
}

4. Sử dụng hook useFormConfig

Hook này cung cấp dữ liệu cấu hình biểu mẫu.

Ví dụ:

const {
  fields,
  initialValues,
  validationSchema,
} = useFormConfig(formData?.attributes);

Gửi

Ví dụ:

<Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={() => {}}>
  {({
    values,
    errors,
    touched,
    handleChange,
    handleBlur,
    handleSubmit,
    isSubmitting,
  }) => {
    return (
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          name="email"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values?.email}
        />
        <input
          type="text"
          name="first_name"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values?.first_name}
        />
        <input
          type="text"
          name="surname"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values?.surname}
        />
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>
      </form>
    );
  }}
</Formik>

Ví dụ cuối cùng

// 1. Import defineOneEntry, Formik and useFormConfig
import { defineOneEntry } from 'oneentry';
import { Formik } from 'formik';
import useFormConfig from './useFormConfig';

// 1.1 define PROJECT_URL and APP_TOKEN
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. Get form data from OneEntry
const formData = await Forms.getFormByMarker('contact_us');

// 4. Extract form configuration with useFormConfig react hook
const {
  fields,
  initialValues,
  validationSchema,
} = useFormConfig(formData?.attributes);

// 5. Create form with Formik and useFormConfig data
return (
  <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={() => {}}>
    {({
      values,
      errors,
      touched,
      handleChange,
      handleBlur,
      handleSubmit,
      isSubmitting,
    }) => {
      return (
        <form onSubmit={handleSubmit}>
          <input
            type="email"
            name="email"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values?.email}
          />
          <input
            type="text"
            name="first_name"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values?.first_name}
          />
          <input
            type="text"
            name="surname"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values?.surname}
          />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </form>
      );
    }}
  </Formik>
);